Appends script tags to the document as functions or components with ease
npm install --save react-use-scripts- react-use-scripts will return a default export useScript and a named export { ScriptLoader }
- Use ScriptLoader as an element in your JSX and add optional children and/or fallback rendering
import * as React from 'react'; import { ScriptLoader } from 'react-use-scripts'; const App = () => { return ( <ScriptLoader id="custom-script-id" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" delay={500} onReady={() => console.log('ready!')} onError={(error) => console.log('an error has happened!', error)} fallback={(error) => ( <span>This has errored! {JSON.stringify(error)}</span> )} > <span>Script has loaded succesfully! </ScriptLoader> ); };- Append scripts to the document programmatically
import * as React from 'react'; import useScript from 'react-use-scripts'; const App = () => { const [startTrigger, setStartTrigger] = React.useState(false); const { ready, error } = useScript({ src: 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js', onReady: () => console.log('ready!'), onError: (error) => console.log('an error has happened!', error), startTrigger, }); const handleAppendScriptClick = () => { setStartTrigger(true); }; return ( <div> <button onClick={handleAppendScriptClick}> Click to start appending </button> {ready && <h1>Script appended to the head programmatically!</h1>} {error && <h1>Script has errored! {JSON.stringify(error)}</h1>} </div> ); };ScriptLoader: all props are optional but without either src or innerText this will returnnull;
interface IScriptLoaderProps { src?: string; innerText?: string; onReady?: () => void; onError?: (error: string | Event) => void; otherProps?: THTMLScriptElementProps; startTrigger?: boolean; id?: string; appendTo?: string; delay?: number; children?: | JSX.Element | JSX.Element[] | string | string[] | number | number[]; fallback?: (error: string | Event) => JSX.Element; }- useScript
interface IScriptProps { src?: string; innerText?: string; onReady?: () => void; onError?: (error: string | Event) => void; otherProps?: THTMLScriptElementProps; startTrigger?: boolean; id?: string; appendTo?: string; delay?: number; }- Default Props:
startTrigger = true, id = `react-use-script-${new Date().toISOString()}`, appendTo = 'head', delay = 0,react-use-scripts is MIT licensed.
This hook is created using create-react-hook.