Context

Learn how to use Flow with the React context API

Flow can typecheck your React components that use the context API introduced in React 16.3.

Note: Typing context values requires Flow 0.70 or later.

Flow will infer types from the way you use a context’s { Provider, Consumer } pair:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
import React from "react";

const Theme = React.createContext();

<Theme.Provider value="light" />;

<Theme.Consumer>{value => value.toUpperCase()}</Theme.Consumer>; // Error! `value` is nullable.

<Theme.Consumer>
  {value =>
    value
      ? value.toUpperCase() // Valid: `value` is a string.
      : null
  }
</Theme.Consumer>;

If your context has a default value, Flow will type your consumer component accordingly:

1
2
3
4
5
 
import React from "react";

const Theme = React.createContext("light");

<Theme.Consumer>{value => value.toUpperCase()}</Theme.Consumer>; // Valid: `value` is a non-nullable string.

To explicitly specify the type of a context value, pass a type parameter to createContext:

1
2
3
4
5
 
import React from "react";

const Theme = React.createContext<"light" | "dark">("light");

<Theme.Provider value="blue" />; // Error! "blue" is not one of the allowed values.
← Higher-order Components Redux →

Was this guide helpful? Let us know by sending a message to @flowtype.