# @shopify/react-csrf

> Share CSRF tokens throughout a React application

Latest version **3.1.0** (published 2024-06-10) · MIT license · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

```sh
npm install @shopify/react-csrf
pnpm add @shopify/react-csrf
yarn add @shopify/react-csrf
bun add @shopify/react-csrf
```

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 3.1.0 |
| Published | 2024-06-10 |
| First published | 2019-08-28 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >=18.12.0 |
| Dependencies | 0 |
| Unpacked size | 5.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1681 |
| Author | Shopify Inc. |
| Maintainers | jaimie.rockburn, blittle, shopify-admin, maryharte, crisfmb, pmoloney89, netlohan, st999999, justin-irl, megswim, wcandillon, nathanpjf, shopify-dep, goodforonefare, lemonmade, vsumner, wizardlyhel, antoine.grant, tsov, andyw8-shopify, henrytao, hannachen, vividviolet, bpscott |

## Links

- npm: https://www.npmjs.com/package/@shopify/react-csrf
- Repository: https://github.com/Shopify/quilt
- Homepage: https://github.com/Shopify/quilt/blob/main/packages/react-csrf/README.md
- Issues: https://github.com/Shopify/quilt/issues
- npm.io page: https://npm.io/package/@shopify/react-csrf

## Recent versions

- 3.1.0 (latest) — 2024-06-10
- 0.0.0-snapshot-20221114144029 (snapshot) — 2022-11-14
- 3.0.1-react-18-react-testing-beta.10.0 (next) — 2022-06-08
- 3.0.2 — 2022-08-24
- 3.0.1 — 2022-06-08
- 3.0.1-react-18-react-testing-beta.3 — 2022-06-03
- 3.0.1-react-18-react-testing-beta.2 — 2022-06-03
- 3.0.1-react-18-react-testing-beta.0 — 2022-06-01
- 3.0.0 — 2022-05-19
- 2.1.10-react-18-react-testing-beta.0 — 2022-05-02
- 2.1.10 — 2022-03-09
- 2.1.9 — 2022-02-25
- 2.1.8-export-beta.0 — 2022-02-22
- 2.1.8 — 2022-02-01
- 2.1.7 — 2022-02-01
- … 35 more at https://npm.io/package/@shopify/react-csrf/versions

## README

# `@shopify/react-csrf`

[![Build Status](https://github.com/Shopify/quilt/workflows/Node-CI/badge.svg?branch=main)](https://github.com/Shopify/quilt/actions?query=workflow%3ANode-CI)
[![Build Status](https://github.com/Shopify/quilt/workflows/Ruby-CI/badge.svg?branch=main)](https://github.com/Shopify/quilt/actions?query=workflow%3ARuby-CI)
[![License: MIT](https://img.shields.io/badge/License-MIT-green.svg)](LICENSE.md) [![npm version](https://badge.fury.io/js/%40shopify%2Freact-csrf.svg)](https://badge.fury.io/js/%40shopify%2Freact-csrf.svg) [![npm bundle size (minified + gzip)](https://img.shields.io/bundlephobia/minzip/@shopify/react-csrf.svg)](https://img.shields.io/bundlephobia/minzip/@shopify/react-csrf.svg)

Share CSRF tokens throughout a React application.

## Installation

```bash
yarn add @shopify/react-csrf
```

## Usage

Setup the Provider around all of the application that need to access csrf token.

```tsx
// App.tsx
import * as React from 'react';
import {CsrfTokenContext} from '@shopify/react-csrf';

function App({token}: {token?: string}) {
  return (
    <CsrfTokenContext.Provider value={token}>
      {/* rest of the app */}
    </CsrfTokenContext.Provider>
  );
}
```

Access csrf token using `useCsrfToken` hook:

```tsx
import React from 'react';
import {useCsrfToken} from '@shopify/react-csrf';

export default function MyToken() {
  const csrfToken = useCsrfToken();
  return <p>My CSRF Token is: {csrfToken}</p>;
}
```

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