Skip to content

🔭 React devtool to break your app state into its atomic particles & view each of them autonomously as they change.

Notifications You must be signed in to change notification settings

guypeer8/react-state-trace

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

16 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

react-state-trace

  • React devtool that lets you break your app state into its atomic particles and view each of them autonomously as they change.

Demo

react-state-trace

Installation

npm install --save react-state-trace

Usage

  • Press shift + s to show or hide the devtool
import React from 'react';
import ReactDOM from 'react-dom';
import store from './store';
import StateViewer from 'react-state-trace';

const App = () => (
    <div>
        <StateViewer store={store} />  
        <div>
            <p>REACT STATE TRACE IS IN THE HOUSE</p>
            <button>Like</button>
        </div>
    </div>
);

ReactDOM.render(
    <App />,
    document.getElementById('root')
);
  • StateViewer is a toggleable component through which you can navigate your app state and see all the moving parts as they change in real time.
  • props. one of the following should be passed to the component to track the state:
    • state - explicitly pass the app state.
    • store - pass a store holding the app state. the store should have one of the following attributes:
      • getState - a function that returns the app state (as implemented im redux for example).
      • state - the application state attribute.
    • dev - defaults to true, pass false in order for the devtool not to render.

About

🔭 React devtool to break your app state into its atomic particles & view each of them autonomously as they change.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published