useScript
With useScript
you can lazy-load external third party scripts, that your
components might depend on. It checks if the requested url
already exists and reuses it, instead of creating a new load request.
Checkout the Storybook demo.
Installation
yarn add @charlietango/use-script
API
const [ready, status] = useScript(url)
The hook returns an array, where the first value is a boolean indicating if the script is ready.
The second value is the current loading status, that will be one of the ScriptStatus
enum values:
enum ScriptStatus {
IDLE = 'idle',
LOADING = 'loading',
READY = 'loaded',
ERROR = 'error',
}
Example
import React from 'react'
import useScript, { ScriptStatus } from '@charlietango/use-script'
const Component = () => {
const [ready, status] = useScript('https://api.google.com/api.js')
if (status === ScriptStatus.ERROR) {
return <div>Failed to load Google API</div>
}
return <div>Google API Ready: {ready}</div>
}
export default Component