# react-context-devtool

> Devtool for React Context and useReducer hook

Latest version **2.0.3** (published 2021-01-23) · MIT license · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

```sh
npm install react-context-devtool
pnpm add react-context-devtool
yarn add react-context-devtool
bun add react-context-devtool
```

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 2.0.3 |
| Published | 2021-01-23 |
| First published | 2019-12-07 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 11.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 244 |
| Author | Deep Patel |
| Maintainers | pateldeep |

## Links

- npm: https://www.npmjs.com/package/react-context-devtool
- Repository: https://github.com/deeppatel234/react-context-devtool
- Homepage: https://github.com/deeppatel234/react-context-devtool#readme
- Issues: https://github.com/deeppatel234/react-context-devtool/issues
- npm.io page: https://npm.io/package/react-context-devtool

## Recent versions

- 2.0.3 (latest) — 2021-01-23
- 2.0.2 — 2021-01-17
- 2.0.1 — 2021-01-17
- 2.0.0 — 2020-06-30
- 1.0.1 — 2020-02-16
- 1.0.0 — 2019-12-07

## README

<p align="center">
  <img src="https://github.com/deeppatel234/react-context-devtool/blob/master/store-assets/cover.png?raw=true" width="80%"/>
</p>

<h2 align="center">Devtool for React Context and useReducer Hook</h2>

[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT) [![NPM Download](https://img.shields.io/npm/dt/react-context-devtool.svg)](https://www.npmjs.com/package/react-context-devtool) [![NPM](https://img.shields.io/npm/v/react-context-devtool.svg)](https://www.npmjs.com/package/react-context-devtool)

<p align="center">
  <img src="https://github.com/deeppatel234/react-context-devtool/blob/master/store-assets/screenshots/context-tree-view.png?raw=true" width="50%"/>
</p>
<p align="center">
  <img src="https://github.com/deeppatel234/react-context-devtool/blob/master/store-assets/screenshots/context-raw-view.png?raw=true" width="30%"/>
  <img src="https://github.com/deeppatel234/react-context-devtool/blob/master/store-assets/screenshots/reducer-action-view.png?raw=true" width="30%"/>
  <img src="https://github.com/deeppatel234/react-context-devtool/blob/master/store-assets/screenshots/reducer-diff-view.png?raw=true" width="30%"/>
</p>

## Installation

- Download extension from
	- [Chrome Web Store](https://chrome.google.com/webstore/detail/oddhnidmicpefilikhgeagedibnefkcf)
    - [Firefox Addons Store](https://addons.mozilla.org/en-US/firefox/addon/react-context-devtool/)
    - [Microsoft Edge Addons Store](https://microsoftedge.microsoft.com/addons/detail/react-context-devtool/bnclaomncapgohhafjepfklgbjdjlfcd)

### Auto Mode
- Download and install npm package

```sh
npm install react-context-devtool
```

- Attach root container in debugContextDevtool method

```js
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);

```

| 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.

```js

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.

```js

<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`

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

or

- assign display name in Context

```js
  MyContext.displayName = "Context Display Name";
```

### Set Display name for useReducer

- reducer function name is use as displayName in debug


## Disable in production mode

```js

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

```



## License

MIT

---
_Source: https://npm.io/package/react-context-devtool · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._