@cs125/react-nonce

React TypeScript support for stable browser and session unique identifiers.

Install

npm i @cs125/react-nonce

Use

First, wrap your app in the <NonceProvider /> component:

import { NonceProvider } from "@cs125/react-nonce"

const App: React.FC = () => {
  return (
    <NonceProvider name={"react-nonce"}>
      <RestOfYourApp />
    </NonceProvider>
  )
}

Then you can use the NonceContext to retrieve the browser and tab nonce values. We provide a useNonce method that you can use in a functional component:

import { useNonce } from "@cs125/react-nonce"

const MyComponent: React.FC = ({}) => {
  const { browser, tab } = useNonce()
}

The retrieved values are UUIDs.

Demo

Visit the demo here.