spenserschwartz / Recoilize

Recoil developer tool

Recoilize is a Chrome Dev Tool meant for debugging applications built with the new Recoil.js state management library!

Get Recoilize on the Chrome Store!

** STILL IN BETA **

Shows the difference in atoms and selectors from the previous render

View your atoms and selectors in a collapsible tree

Visualize all your atom and selector values in a graph

Display how all your atoms and selectors relate to each other

See which of your React components are subscribed to certain atoms and selectors

Installation

Install Recoilize Module

npm install recoilize

** IMPORTANT **

Import RecoilizeDebugger from the Recoilize module

import RecoilizeDebugger from 'recoilize';

Recoilize requires you to create a variable that grabs the HTML element where you inject your React application

const root = document.getElementById('root');

You must import all Atoms and Selectors and pass them into the Recoilize component as shown above

import * as nodes from './store';

<RecoilizeDebugger nodes={nodes} root={root} />;

Example:

import RecoilizeDebugger from 'recoilize';
import RecoilRoot from 'recoil';
import * as nodes from './store';

const root = document.getElementById('root');

ReactDOM.render(
  <RecoilRoot>
    <RecoilizeDebugger nodes={nodes} root={root} />
    <App />
  </RecoilRoot>,
  root,
);

Open your application on the Chrome Browser and start debugging with Recoilize!

(Only supported with React applications using Recoil as state management)

We will continue updating Recoilize alongside Recoil's updates!

Contributors

Bren Yamaguchi @github @linkedin

Saejin Kang @github @linkedin

Jonathan Escamila @github @linkedin

Sean Smith @github @linkedin