Recoil DevTools Dock Monitor

A resizable and movable dock for Recoil DevTools, powered by React Dock.

Installation

pnpm add recoil-devtools-dock

Usage

import { RecoilRoot } from 'recoil';
import { DockMonitor } from 'recoil-devtools-dock';
import { LogMonitor } from 'recoil-devtools-log-monitor';

function App() {
  return (
    <RecoilRoot>
      <DockMonitor>
        <LogMonitor />
      </DockMonitor>
    </RecoilRoot>
  );
}

Props

| Prop | Type | Default | Description | | --------------------- | ----------- | ----------------------------------- | ------------------------------ | | children | ReactNode | (required) Child monitor components | | toggleVisibilityKey | string | "ctrl-h" | Key to toggle visibility | | changePositionKey | string | "ctrl-q" | Key to change dock position | | changeMonitorKey | string | "ctrl-m" | Key to switch monitors | | fluid | boolean | true | Size as fraction vs fixed | | defaultSize | number | 0.3 | Dock size | | defaultPosition | Position | "right" | Dock position | | defaultIsVisible | boolean | true | Initial visibility | | persistState | boolean | true | Persist to localStorage | | showShortcutButton | boolean | true | Show keyboard shortcuts button |

Keyboard Shortcuts

| Shortcut | Action | | -------- | ----------------- | | Ctrl+H | Toggle visibility | | Ctrl+Q | Change position | | Ctrl+M | Change monitor |

Click the ⌨ button in the dock to see available shortcuts.

Multiple Monitors

<DockMonitor changeMonitorKey="ctrl-m">
  <LogMonitor />
  <Inspector />
</DockMonitor>

Demo

A live, runnable demo using all packages lives in recoil-devtools-demo/ (Vite + React 18). Run it locally:

cd recoil-devtools-demo && pnpm install && pnpm dev

Or try it online: https://ulises-jeremias.github.io/recoil-devtools/

License

MIT