React devtool that lets you break your app state into its atomic particles and view each of them autonomously as they change.
Demo
Installation
npm install --save react-state-trace
Usage
Press shift + s to show or hide the devtool
importReactfrom'react';importReactDOMfrom'react-dom';importstorefrom'./store';importStateViewerfrom'react-state-trace';constApp=()=>(<div><StateViewerstore={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.