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

import { useScript } from 'use-script'

const MyComponent = () => {
    const { loading, error } = useScript({
        src: '//cdn.bootcss.com/jquery/2.2.1/jquery.min.js',
    })

    if (loading || error) {
        return null
    }

    return <OtherComponentWhichNeedsJQuery />
}

Testing

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

import { setTestLoadMode } from 'use-script'

// Resolve any loaded scripts immediately
setTestLoadMode(() => Promise.resolve())

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