React Cookie Devtool

!React
!Tailwind CSS
!shadcn/ui
!Vite

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
NPM package: @jonmatum/react-cookie-devtool

Features

- Floating widget UI () with position control
- Sheet-based drawer UI () 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

$3

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

function App() {
return ;
}
`

$3

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

function App() {
return ;
}
`

$3

| 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