# @opencookie-dev/react

> React binding for the OpenCookie headless store

Latest version **0.2.0** (published 2026-09-24) · MIT license · 0 weekly downloads

## Install

```sh
npm install @opencookie-dev/react
pnpm add @opencookie-dev/react
yarn add @opencookie-dev/react
bun add @opencookie-dev/react
```

## Health

**Score 65/100 (B)** — status: active.

Positive: has types; esm support; no vulnerabilities; recently updated; high maintenance score.

Warnings: low downloads; pre 1.0.

## Facts

| | |
|---|---|
| Version | 0.2.0 |
| Published | 2026-09-24 |
| First published | 2026-09-23 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >=18.18.0 |
| Dependencies | 1 |
| Unpacked size | 12 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | jacksonxly |

## Links

- npm: https://www.npmjs.com/package/@opencookie-dev/react
- npm.io page: https://npm.io/package/@opencookie-dev/react

## Dependencies (1)

- [@opencookie-dev/core](https://npm.io/package/@opencookie-dev/core.md) ^0.2.0

## Recent versions

- 0.2.0 (latest) — 2026-09-24
- 0.1.0 — 2026-09-23

## README

# @opencookie-dev/react

The React binding for OpenCookie's headless external store. Consent behavior remains in `@opencookie-dev/core`; this package only supplies a provider and hooks.

## Install

```sh
pnpm add @opencookie-dev/core @opencookie-dev/react
```

```tsx
import type { OpenCookieSnapshot } from "@opencookie-dev/core";
import {
  OpenCookieProvider,
  useOpenCookieSnapshot,
} from "@opencookie-dev/react";

export function ConsentStatus() {
  const snapshot = useOpenCookieSnapshot<OpenCookieSnapshot>();
  return <output>{snapshot.readiness}</output>;
}

export function ConsentRoot({ children }) {
  return <OpenCookieProvider store={store}>{children}</OpenCookieProvider>;
}
```

The hooks use React's `useSyncExternalStore` and the core store's deterministic server snapshot. Construct the store without browser access, then call `initialize()` after mount.

For Next.js, use `@opencookie-dev/next`, which adds the required client boundary.

OpenCookie is a technical tool, not legal advice.

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