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 => }
+
+));
diff --git a/examples/context/lifecycles.js b/examples/context/lifecycles.js
new file mode 100644
index 000000000..67c6f830e
--- /dev/null
+++ b/examples/context/lifecycles.js
@@ -0,0 +1,20 @@
+class Button extends React.Component {
+ componentDidMount() {
+ alert(this.props.theme);
+ }
+
+ render() {
+ const {theme, children} = this.props;
+ return (
+
+ );
+ }
+}
+
+export default props => (
+
+ {theme => }
+
+);