Choose a version:

useNonce

The useNonce 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 useNonce
useNonce()

Examples

import {

Links,

LiveReload,

Meta,

Outlet,

Scripts,

ScrollRestoration,

} from 'react-router';

import {useNonce} from '@shopify/hydrogen';

export default function App() {

const nonce = useNonce();

return (

<head>

</head>

<body>

</body>

</html>

);

}

Examples

Example code

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>
  );
}

Anchor to RelatedRelated

createContentSecurityPolicy

Script

Was this page helpful?

Anchor to useNonceuseNonce()

Anchor to RelatedRelated

Anchor to useNonce
useNonce()