Devtool for React Context and useReducer Hook

Installation

• Download extension from
  • Chrome Web Store
  • Firefox Addons Store
  • Microsoft Edge Addons Store

Auto Mode

• Download and install npm package

npm install react-context-devtool

• Attach root container in debugContextDevtool method

importReactfrom"react";importReactDOMfrom"react-dom";import{debugContextDevtool}from'react-context-devtool';importAppfrom"./App";constcontainer=document.getElementById("root");ReactDOM.render(<App/>,container);// Attach root containerdebugContextDevtool(container,options);

Name	Type	Default	Description
debugReducer	boolean	true	enable/disable useReducer debug
debugContext	boolean	true	enable/disable context debug
disable	boolean	false	disable react-context-devtool including manual mode
disableAutoMode	boolean	false	disable auto mode only

Manual Mode

• if you want to debug only selected context so you can use manual mode

• Add ContextDevTool component inside your Provider.

import{ContextDevTool}from'react-context-devtool';<MyContext.Providervalue={{a: 'hello',b: 'world'}}>
// Add this in your context provider
<ContextDevToolcontext={MyContext}id="uniqContextId"displayName="Context Display Name"/><YourComponent/></MyContext.Provider>

2. 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 });}returnnull;}}</MyContext.Consumer>

Set Display name in Auto Mode

Set Display name for Context API

• set dispayName props in Provider

<MyContext.Providervalue={{a: 'hello',b: 'world'}}displayName="Context Display Name"><YourComponent/></MyContext.Provider>

or

• assign display name in Context

MyContext.displayName="Context Display Name";

Set Display name for useReducer

• reducer function name is use as displayName in debug

Disable in production mode

debugContextDevtool(container,{disable: process.env.NODE_ENV==="production"});

License

MIT