Debug ReactJS Context API with React Context Devtool

#react #javascript #chrome #firefox

Introducing React Context Devtool.Now you can easily debug your context in your react app with a tree, raw and diff views.

you can download from Chrome Web Store and Firefox addons store.

Tree View

Raw View

Diff View

Installation

Download extension from Chrome Web Store or Firefox addons store.
Add _REACT_CONTEXT_DEVTOOL method in your Consumer.




<MyContext.Consumer>
  {
    values => {
      if (window._REACT_CONTEXT_DEVTOOL) {
        window._REACT_CONTEXT_DEVTOOL({ id: 'uniqContextId', displayName: 'Context Display Name', values });
      }
      return null;
    }
  }
</MyContext.Consumer>

Use with NPM package

Download and install npm package



npm install react-context-devtool

Add ContextDevTool component inside your Provider.




import ContextDevTool from 'react-context-devtool';

<MyContext.Provider value={{ a: 'hello', b: 'world' }}>
  // Add this in your context provider
  <ContextDevTool context={MyContext} id="uniqContextId" displayName="Context Display Name" />
  <YourComponent />
</MyContext.Provider>

React Context DevTool is an open-source project. you can also contribute to this project. Github Link

Top comments (4)

Daws Bot • Apr 23 '20

Hey Deep, thank you for making such an attractive UI to this and a blog post to introduce it!

I'd like to add some thoughts about the API that this requires more boilerplate than I want. Is it possible to simplify this API so that user's do not need to manually register each context in both the provider and the consumer? Getting react-context-devtool as good or better than redux will require getting the API of this extension just as easy.