React Cookie Devtool

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 (<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

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

or

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

Usage

Floating UI

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

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

Sheet (Drawer) UI

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