useScript

Loads a third party script and returns a value when it's loaded or fails to load.

There are a few hooks out there but they do not handle concurrency or rendering multiple components which require the same script at the same time.

Example

1import { useScript } from 'use-script'
2
3const MyComponent = () => {
4    const { loading, error } = useScript({
5        src: '//cdn.bootcss.com/jquery/2.2.1/jquery.min.js',
6    })
7
8    if (loading || error) {
9        return null
10    }
11
12    return <OtherComponentWhichNeedsJQuery />
13}

Testing

JSDom based tests can't load scripts, so you can use setTestLoadMode to control when the script loads.

1import { setTestLoadMode } from 'use-script'
2
3// Resolve any loaded scripts immediately
4setTestLoadMode(() => Promise.resolve())

You will need to make sure you polyfill any globals that script would create if they are relied on by your tests