diff --git a/content/docs/context.md b/content/docs/context.md index 7c158a4e9..4441118d8 100644 --- a/content/docs/context.md +++ b/content/docs/context.md @@ -16,6 +16,9 @@ In a typical React application, data is passed top-down (parent to child) via pr - [Examples](#examples) - [Static Context](#static-context) - [Dynamic Context](#dynamic-context) + - [Consuming Multiple Contexts](#consuming-multiple-contexts) + - [Accessing Context in Lifecycle Methods](#accessing-context-in-lifecycle-methods) + - [Forwarding Refs to Context Consumers](#forwarding-refs-to-context-consumers) - [Legacy API](#legacy-api) @@ -91,6 +94,15 @@ A more complex example with dynamic values for the theme: ## Consuming Multiple Contexts `embed:context/multiple-contexts.js` + +## Accessing Context in Lifecycle Methods + +`embed:context/lifecycles.js` + +## Forwarding Refs to Context Consumers + +`embed:context/forwarding-refs.js` + ## Legacy API > The old context API was marked as legacy in React 16.3 and will be removed in version 17. diff --git a/examples/context/forwarding-refs.js b/examples/context/forwarding-refs.js new file mode 100644 index 000000000..e23ae77f8 --- /dev/null +++ b/examples/context/forwarding-refs.js @@ -0,0 +1,11 @@ +const Button = ({theme, children}) => ( + +); + +export default React.forwardRef((props, ref) => ( + + {theme => + ); + } +} + +export default props => ( + + {theme =>