Skip to content

Commit 5cdb85b

Browse files
M-Izadmehralexkrolick
authored andcommitted
Add doc for context displayaName (#2367)
* Add doc for context displayaName * Add highlight for js doc * Fix context display name link * Fix context displayName comment
1 parent a558e45 commit 5cdb85b

File tree

1 file changed

+15
-0
lines changed

1 file changed

+15
-0
lines changed

content/docs/context.md

+15
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ In a typical React application, data is passed top-down (parent to child) via pr
1515
- [Context.Provider](#contextprovider)
1616
- [Class.contextType](#classcontexttype)
1717
- [Context.Consumer](#contextconsumer)
18+
- [Context.displayName](#contextdisplayname)
1819
- [Examples](#examples)
1920
- [Dynamic Context](#dynamic-context)
2021
- [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-
196197
>
197198
> For more information about the 'function as a child' pattern, see [render props](/docs/render-props.html).
198199
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+
199214
## Examples {#examples}
200215

201216
### Dynamic Context {#dynamic-context}

0 commit comments

Comments
 (0)