Recoil DevTools

A composited DevTools component that combines DockMonitor and LogMonitor in a single component.

Installation

pnpm add recoil-devtools

Usage

import { RecoilRoot } from 'recoil';
import { RecoilDevtools } from 'recoil-devtools';
import { atom } from 'recoil';

const countAtom = atom({
  key: 'count',
  default: 0,
});

function App() {
  return (
    <RecoilRoot>
      <RecoilDevtools values={[countAtom]} />
      {/* Your app */}
    </RecoilRoot>
  );
}

Props

| Prop | Type | Default | Description | | ------------------ | --------------- | ------------- | ----------------------- | | values | RecoilState[] | All atoms | Specific atoms to track | | theme | string | "ulisesjcf" | Color theme | | defaultIsVisible | boolean | true | Initial visibility | | defaultPosition | Position | "right" | Dock position |

Theme

Available themes: apath, base8, base16, base16light, bespin, brewer, bright, chalk, codeschool, dracula, duotone, eighties, embedded, emacs, flat, github, google, grayscale, greenscreen, harmonic, hopper, horizon, ice, inspired, irblack, lattice, lucario, material, mexico, monokai, new, nord, ocean, one-light, outer, panda, paraiso, pop, railscasts, recoil, rose, seti, shapeshifter, slate, solarized, spaceduck, spoon, sunburst, tomorrow, tomorrownight, tomorrownightblue, tomorrownightbright, twilight, ulisesjcf, vascular, vice, xcode.

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