From 5cdb85b5e58acedf6078d3398bdbd3b85d74798b Mon Sep 17 00:00:00 2001 From: Mojtaba Izadmehr Date: Tue, 24 Sep 2019 20:54:26 +0200 Subject: [PATCH] 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 --- content/docs/context.md | 15 +++++++++++++++ 1 file changed, 15 insertions(+) diff --git a/content/docs/context.md b/content/docs/context.md index e7bb925c..5b4592c2 100644 --- a/content/docs/context.md +++ b/content/docs/context.md @@ -15,6 +15,7 @@ In a typical React application, data is passed top-down (parent to child) via pr - [Context.Provider](#contextprovider) - [Class.contextType](#classcontexttype) - [Context.Consumer](#contextconsumer) + - [Context.displayName](#contextdisplayname) - [Examples](#examples) - [Dynamic Context](#dynamic-context) - [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- > > For more information about the 'function as a child' pattern, see [render props](/docs/render-props.html). +### `Context.displayName` {#contextdisplayname} + +Context object accepts a `displayName` string property. React DevTools uses this string to determine what to display for the context. + +For example, the following component will appear as MyContext in the DevTools: + +```js{2} +const MyContext = React.createContext(/* some value */); +MyContext.displayName = 'MyDisplayName'; + + // "MyDisplayName.Provider" in DevTools + // "MyDisplayName.Consumer" in DevTools +``` + ## Examples {#examples} ### Dynamic Context {#dynamic-context}