Devtool for React Context

Installation

1. Download extension from Chrome Web Store or Firefox addons store.

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 });
      }
      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>

License

MIT

Documentation managed by