Skip to content

Commit e78909f

Browse files
authored
Update README.md
1 parent 508c0ee commit e78909f

1 file changed

Lines changed: 1 addition & 79 deletions

File tree

README.md

Lines changed: 1 addition & 79 deletions
Original file line numberDiff line numberDiff line change
@@ -22,73 +22,7 @@
2222
- [Firefox Addons Store](https://addons.mozilla.org/en-US/firefox/addon/react-context-devtool/)
2323
- [Microsoft Edge Addons Store](https://microsoftedge.microsoft.com/addons/detail/react-context-devtool/bnclaomncapgohhafjepfklgbjdjlfcd)
2424

25-
### Auto Mode
26-
- Download and install npm package
27-
28-
```sh
29-
npm install react-context-devtool
30-
```
31-
32-
- Attach root container in debugContextDevtool method
33-
34-
```js
35-
import React from "react";
36-
import ReactDOM from "react-dom";
37-
import { debugContextDevtool } from 'react-context-devtool';
38-
39-
import App from "./App";
40-
41-
const container = document.getElementById("root");
42-
43-
ReactDOM.render(<App />, container);
44-
45-
// Attach root container
46-
debugContextDevtool(container, options);
47-
48-
```
49-
50-
| Name | Type | Default | Description |
51-
| ------ | ------ | ------ | ------ |
52-
| `debugReducer` | boolean | `true` | enable/disable useReducer debug |
53-
| `debugContext` | boolean | `true` | enable/disable context debug |
54-
| `disable` | boolean | `false` | disable react-context-devtool including manual mode |
55-
| `disableAutoMode` | boolean | `false` | disable auto mode only |
56-
57-
58-
### Manual Mode
59-
60-
- if you want to debug only selected context so you can use manual mode
61-
62-
- Add ContextDevTool component inside your Provider.
63-
64-
```js
65-
66-
import { ContextDevTool } from 'react-context-devtool';
67-
68-
<MyContext.Provider value={{ a: 'hello', b: 'world' }}>
69-
// Add this in your context provider
70-
<ContextDevTool context={MyContext} id="uniqContextId" displayName="Context Display Name" />
71-
<YourComponent />
72-
</MyContext.Provider>
73-
```
74-
2. Add _REACT_CONTEXT_DEVTOOL method in your Consumer.
75-
76-
```js
77-
78-
<MyContext.Consumer>
79-
{
80-
values => {
81-
if (window._REACT_CONTEXT_DEVTOOL) {
82-
window._REACT_CONTEXT_DEVTOOL({ id: 'uniqContextId', displayName: 'Context Display Name', values });
83-
}
84-
return null;
85-
}
86-
}
87-
</MyContext.Consumer>
88-
89-
```
90-
91-
## Set Display name in Auto Mode
25+
## Set Display names
9226

9327
### Set Display name for Context API
9428

@@ -113,18 +47,6 @@ or
11347
- reducer function name is use as displayName in debug
11448

11549

116-
## Disable in production mode
117-
118-
```js
119-
120-
debugContextDevtool(container, {
121-
disable: process.env.NODE_ENV === "production"
122-
});
123-
124-
```
125-
126-
127-
12850
## License
12951

13052
MIT

0 commit comments

Comments
 (0)