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

1yarn add @charlietango/use-script

API

1const [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:

1enum ScriptStatus {
2  IDLE = 'idle',
3  LOADING = 'loading',
4  READY = 'loaded',
5  ERROR = 'error',
6}

Example

1import React from 'react'
2import useScript, { ScriptStatus } from '@charlietango/use-script'
3
4const Component = () => {
5  const [ready, status] = useScript('https://api.google.com/api.js')
6
7  if (status === ScriptStatus.ERROR) {
8    return <div>Failed to load Google API</div>
9  }
10
11  return <div>Google API Ready: {ready}</div>
12}
13
14export default Component