mdigel/Recoilize

Recoil developer tool

Recoilize

Recoilize is a Chrome Dev Tool meant for debugging applications built with the new Recoil.js state management library! (LINK OUR CHROME EXTENSION IN THE STORE AND THE NPM MODULE)

** 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,
);

Get Recoilize from the Chrome Store!

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