# @cs125/react-nonce

> React Typescript support for stable browser and session unique identifiers.

Latest version **2020.5.0** (published 2020-05-07) · MIT license · 0 weekly downloads

## Install

```sh
npm install @cs125/react-nonce
pnpm add @cs125/react-nonce
yarn add @cs125/react-nonce
bun add @cs125/react-nonce
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities.

Warnings: low downloads; no esm support.

Negative: abandoned.

## Facts

| | |
|---|---|
| Version | 2020.5.0 |
| Published | 2020-05-07 |
| First published | 2020-05-07 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 15.9 KB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 1 |
| Author | Geoffrey Challen |
| Maintainers | geoffrey.challen |

## Links

- npm: https://www.npmjs.com/package/@cs125/react-nonce
- Repository: https://github.com/cs125-illinois/react-nonce
- Homepage: https://github.com/cs125-illinois/react-nonce#readme
- Issues: https://github.com/cs125-illinois/react-nonce/issues
- npm.io page: https://npm.io/package/@cs125/react-nonce

## Dependencies (1)

- [uuid](https://npm.io/package/uuid.md) ^8.0.0

## Recent versions

- 2020.5.0 (latest) — 2020-05-07

## README

# @cs125/react-nonce

![npm](https://img.shields.io/npm/v/@cs125/react-nonce)
[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)

React TypeScript support for stable browser and session unique identifiers.

## Install

```bash
npm i @cs125/react-nonce
```

## Use

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

```jsx
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:

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

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

The retrieved values are UUIDs.

## Demo

Visit the demo [here](https://cs125-illinois.github.io/react-nonce/).

---
_Source: https://npm.io/package/@cs125/react-nonce · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._