File tree 1 file changed +15
-0
lines changed
1 file changed +15
-0
lines changed Original file line number Diff line number Diff line change @@ -15,6 +15,7 @@ In a typical React application, data is passed top-down (parent to child) via pr
15
15
- [ Context.Provider] ( #contextprovider )
16
16
- [ Class.contextType] ( #classcontexttype )
17
17
- [ Context.Consumer] ( #contextconsumer )
18
+ - [ Context.displayName] ( #contextdisplayname )
18
19
- [ Examples] ( #examples )
19
20
- [ Dynamic Context] ( #dynamic-context )
20
21
- [ Updating Context from a Nested Component] ( #updating-context-from-a-nested-component )
@@ -196,6 +197,20 @@ Requires a [function as a child](/docs/render-props.html#using-props-other-than-
196
197
>
197
198
> For more information about the 'function as a child' pattern, see [ render props] ( /docs/render-props.html ) .
198
199
200
+ ### ` Context.displayName ` {#contextdisplayname}
201
+
202
+ Context object accepts a ` displayName ` string property. React DevTools uses this string to determine what to display for the context.
203
+
204
+ For example, the following component will appear as MyContext in the DevTools:
205
+
206
+ ``` js{2}
207
+ const MyContext = React.createContext(/* some value */);
208
+ MyContext.displayName = 'MyDisplayName';
209
+
210
+ <MyContext.Provider> // "MyDisplayName.Provider" in DevTools
211
+ <MyContext.Consumer> // "MyDisplayName.Consumer" in DevTools
212
+ ```
213
+
199
214
## Examples {#examples}
200
215
201
216
### Dynamic Context {#dynamic-context}
You can’t perform that action at this time.
0 commit comments