JSPM – @jonmatum/react-cookie-devtool@1.2.1

Package Exports

@jonmatum/react-cookie-devtool

Readme

A development-only floating UI tool for managing cookies in your React app. Configure, set, test, and clear cookies during local development with ease.

Features

Floating button UI (<CookieDevTool />) with customizable position
Optional drawer UI (<CookieDevToolSheet />) using shadcn/ui Sheet
Input for key/value pair
Select and edit existing cookies
Clear a single cookie or all cookies
Light/dark mode support
Dismissible feedback messages
Fully developer-focused and visible only in development

Installation

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

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'	Position of the floating button

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

Development

To build locally:

npm run build

To test in a consuming app, use npm link or publish to a private registry.

Release Workflow

This project uses release-please for automated versioning and changelog generation.

Use conventional commit messages when making changes:

feat: for new features
fix: for bug fixes
chore: for maintenance

@jonmatum/react-cookie-devtool