@jonmatum/react-cookie-devtool/README.md

[](https://www.npmjs.com/package/@jonmatum/react-cookie-devtool) [](LICENSE) ![React](https://img.shields

# React Cookie Devtool

[![npm version](https://img.shields.io/npm/v/@jonmatum/react-cookie-devtool.svg)](https://www.npmjs.com/package/@jonmatum/react-cookie-devtool)
[![License](https://img.shields.io/npm/l/@jonmatum/react-cookie-devtool)](LICENSE)
![React](https://img.shields.io/badge/react-18.2.0-blue)
![Tailwind CSS](https://img.shields.io/badge/tailwindcss-3.4.1-06B6D4)
![shadcn/ui](https://img.shields.io/badge/shadcn--ui-2.3.0-yellow)
![Vite](https://img.shields.io/badge/vite-6.2.0-646CFF)

**React Cookie Devtool** is a development-only UI for inspecting, editing, and clearing cookies directly in your React app. Designed for modern development stacks, it offers a sleek interface via a floating widget or a drawer-style sheet powered by shadcn/ui.

Live demo: [jonmatum.github.io/react-cookie-devtool](https://jonmatum.github.io/react-cookie-devtool/)  
NPM package: [@jonmatum/react-cookie-devtool](https://www.npmjs.com/package/@jonmatum/react-cookie-devtool)

## Features

- Floating widget UI (`<CookieDevTool />`) with position control
- Sheet-based drawer UI (`<CookieDevToolSheet />`) using shadcn/ui Sheet
- Input for key/value pair and cookie management
- Select and update existing cookies
- Clear a single cookie or all cookies
- Light/Dark mode support
- Dismissible feedback alerts
- Visible only during development (or on GitHub Pages)

## Installation

```bash
npm install --save-dev @jonmatum/react-cookie-devtool
```

or

```bash
yarn add --dev @jonmatum/react-cookie-devtool
```

## Usage

### Floating UI

```tsx
import { CookieDevTool } from '@jonmatum/react-cookie-devtool';

function App() {
  return <CookieDevTool position="bottom-right" />;
}
```

### Sheet (Drawer) UI

```tsx
import { CookieDevToolSheet } from '@jonmatum/react-cookie-devtool';

function App() {
  return <CookieDevToolSheet />;
}
```

### Props

| Name     | Type                                                              | Default        | Description                         |
|----------|-------------------------------------------------------------------|----------------|-------------------------------------|
| `position` | "top-left" \| "top-right" \| "bottom-left" \| "bottom-right" | "bottom-right" | Sets the position of the floating button |

> The component disables itself in production unless hosted on GitHub Pages.

## License

MIT License — see [LICENSE](./LICENSE)