use
The hook returns the content security policy nonce. Use the hook to manually add a nonce to third party scripts. The Script component automatically does this for you. Note, the nonce should never be available in the client, and should always return undefined in the browser.
Anchor to useNonceuse
use
Examples
import {
Links,
LiveReload,
Meta,
Outlet,
Scripts,
ScrollRestoration,
} from 'react-router';
import {useNonce} from '@shopify/hydrogen';
export default function App() {
const nonce = useNonce();
return (
<html lang="en">
<head>
<meta charSet="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<Meta />
<Links />
</head>
<body>
<Outlet />
<ScrollRestoration nonce={nonce} />
<Scripts nonce={nonce} />
<LiveReload nonce={nonce} />
</body>
</html>
);
}
Examples
Example code
Description
I am the default example
JavaScript
import { Links, LiveReload, Meta, Outlet, Scripts, ScrollRestoration, } from 'react-router'; import {useNonce} from '@shopify/hydrogen'; export default function App() { const nonce = useNonce(); return ( <html lang="en"> <head> <meta charSet="utf-8" /> <meta name="viewport" content="width=device-width,initial-scale=1" /> <Meta /> <Links /> </head> <body> <Outlet /> <ScrollRestoration nonce={nonce} /> <Scripts nonce={nonce} /> <LiveReload nonce={nonce} /> </body> </html> ); }TypeScript
import {Links, Meta, Outlet, Scripts, ScrollRestoration} from 'react-router'; import {useNonce} from '@shopify/hydrogen'; export default function App() { const nonce = useNonce(); return ( <html lang="en"> <head> <meta charSet="utf-8" /> <meta name="viewport" content="width=device-width,initial-scale=1" /> <Meta /> <Links /> </head> <body> <Outlet /> <ScrollRestoration nonce={nonce} /> <Scripts nonce={nonce} /> </body> </html> ); }
Was this page helpful?