useNonce(prefix: string = '')
useNonce() is a React hook for providing deterministic random strings.
Do not use useNonce() in any situation where you need unguessable or cyptographically strong random values. Just don't do it.
The main use-case for useNonce()
is when you need to create a unique id for an
html element that won't collide with any other elements on the page, but you
are using SSR (server side rendering) and you want your page to render
identically on both client and server. Traditional means for doing this
that rely on Math.random()
or crypto APIs will produce different output
on client and server, which in turn causes strange behavior on the part of
React.
useNonce()
produces identical output on both client and server, which allows
React to work correctly with SSR.
If you're not doing SSR, then you don't need determinism, but you can still use this hook as a convenient way to get random strings in a react app.
Installation:
$ yarn add usenonce
Usage:
In your app.jsx
file (or anywhere that will enclose all uses of useNonce()
):
import { NonceProvider } from 'usenonce'
export default class extends App {
render() {
const {props} = this as any
const {Component, pageProps} = props
return <NonceProvider>
<Component {...pageProps} />
</NonceProvider>
}
}
Then, anywhere you need a deterministic nonce:
import { useNonce } from 'usenonce'
MyComponent = () => {
const nonce = useNonce('id-prefix-')
return <div id={nonce}>
Hello World
</div>
}
This will render:
<div id="id-prefix-wkt0bhqq2ub">Hello World</div>
The generated nonce should remain stable unless the component's state is reset (e.g. if its key
prop changes).
That's all!