|
22 | 22 | - [Firefox Addons Store](https://addons.mozilla.org/en-US/firefox/addon/react-context-devtool/) |
23 | 23 | - [Microsoft Edge Addons Store](https://microsoftedge.microsoft.com/addons/detail/react-context-devtool/bnclaomncapgohhafjepfklgbjdjlfcd) |
24 | 24 |
|
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 |
92 | 26 |
|
93 | 27 | ### Set Display name for Context API |
94 | 28 |
|
|
113 | 47 | - reducer function name is use as displayName in debug |
114 | 48 |
|
115 | 49 |
|
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 | | - |
128 | 50 | ## License |
129 | 51 |
|
130 | 52 | MIT |
0 commit comments