github.com/deeppatel234/react-context-devtool @v4.0

Devtool for React Context and useReducer Hook

Installation

• Download extension from
  • Chrome Web Store
  • Microsoft Edge Addons Store
  • Firefox Addons Store (latest)
  • Firefox Addons Store (upto V3.3)

Set Display names

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";

Display name for useReducer

• reducer function name is use as displayName in debug

Settings

• Chrome : right click on react-context-devtool icon and click on "Options"
• Firefox : right click on react-context-devtool icon and click on "Manage Extenstion" and select "Preferences" tab

Troubleshooting

"React is not found in this page" when using NextJS

This extension requires React Developer Tools installed on your browser to work. Try to install the extension and restart the browser to fix it.

License

MIT

Cross-browser testing provided by Browserstack.