deeppatel234 / React Context Devtool

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

import React from "react";
import ReactDOM from "react-dom";
import { debugContextDevtool } from 'react-context-devtool';

import App from "./App";

const container = document.getElementById("root");

ReactDOM.render(<App />, container);

// Attach root container
debugContextDevtool(container, options);

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.Provider value={{ a: 'hello', b: 'world' }}>
  // Add this in your context provider
  <ContextDevTool context={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 });
      }
      return null;
    }
  }
</MyContext.Consumer>

Set Display name in Auto Mode

Set Display name for Context API

• set dispayName props in Provider

<MyContext.Provider value={{ 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