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 |
|
{"value":"import React from \"react\";\n\nconst Theme = React.createContext();\n\n<Theme.Provider value=\"light\" />;\n\n<Theme.Consumer>{value => value.toUpperCase()}</Theme.Consumer>; // Error! `value` is nullable.\n\n<Theme.Consumer>\n {value =>\n value\n ? value.toUpperCase() // Valid: `value` is a string.\n : null\n }\n</Theme.Consumer>;\n","tokens":[{"type":"T_IMPORT","context":"normal","value":"import","line":1,"start":0,"end":6},{"type":"T_IDENTIFIER","context":"normal","value":"React","line":1,"start":7,"end":12},{"type":"T_IDENTIFIER","context":"normal","value":"from","line":1,"start":13,"end":17},{"type":"T_STRING","context":"normal","value":"\"react\"","line":1,"start":18,"end":25},{"type":"T_SEMICOLON","context":"normal","value":";","line":1,"start":25,"end":26},{"type":"T_CONST","context":"normal","value":"const","line":3,"start":28,"end":33},{"type":"T_IDENTIFIER","context":"normal","value":"Theme","line":3,"start":34,"end":39},{"type":"T_ASSIGN","context":"normal","value":"=","line":3,"start":40,"end":41},{"type":"T_IDENTIFIER","context":"normal","value":"React","line":3,"start":42,"end":47},{"type":"T_PERIOD","context":"normal","value":".","line":3,"start":47,"end":48},{"type":"T_IDENTIFIER","context":"normal","value":"createContext","line":3,"start":48,"end":61},{"type":"T_LPAREN","context":"normal","value":"(","line":3,"start":61,"end":62},{"type":"T_RPAREN","context":"normal","value":")","line":3,"start":62,"end":63},{"type":"T_SEMICOLON","context":"normal","value":";","line":3,"start":63,"end":64},{"type":"T_LESS_THAN","context":"jsxTag","value":"<","line":5,"start":66,"end":67},{"type":"T_JSX_IDENTIFIER","context":"jsxTag","value":"Theme","line":5,"start":67,"end":72},{"type":"T_PERIOD","context":"jsxTag","value":".","line":5,"start":72,"end":73},{"type":"T_JSX_IDENTIFIER","context":"jsxTag","value":"Provider","line":5,"start":73,"end":81},{"type":"T_JSX_IDENTIFIER","context":"jsxTag","value":"value","line":5,"start":82,"end":87},{"type":"T_ASSIGN","context":"jsxTag","value":"=","line":5,"start":87,"end":88},{"type":"T_JSX_TEXT","context":"jsxTag","value":"\"light\"","line":5,"start":88,"end":95},{"type":"T_DIV","context":"jsxTag","value":"/","line":5,"start":96,"end":97},{"type":"T_GREATER_THAN","context":"jsxTag","value":">","line":5,"start":97,"end":98},{"type":"T_SEMICOLON","context":"normal","value":";","line":5,"start":98,"end":99},{"type":"T_LESS_THAN","context":"jsxTag","value":"<","line":7,"start":101,"end":102},{"type":"T_JSX_IDENTIFIER","context":"jsxTag","value":"Theme","line":7,"start":102,"end":107},{"type":"T_PERIOD","context":"jsxTag","value":".","line":7,"start":107,"end":108},{"type":"T_JSX_IDENTIFIER","context":"jsxTag","value":"Consumer","line":7,"start":108,"end":116},{"type":"T_GREATER_THAN","context":"jsxTag","value":">","line":7,"start":116,"end":117},{"type":"T_LCURLY","context":"normal","value":"{","line":7,"start":117,"end":118},{"type":"T_IDENTIFIER","context":"normal","value":"value","line":7,"start":118,"end":123},{"type":"T_ARROW","context":"normal","value":"=>","line":7,"start":124,"end":126},{"type":"T_IDENTIFIER","context":"normal","value":"value","line":7,"start":127,"end":132},{"type":"T_PERIOD","context":"normal","value":".","line":7,"start":132,"end":133},{"type":"T_IDENTIFIER","context":"normal","value":"toUpperCase","line":7,"start":133,"end":144},{"type":"T_LPAREN","context":"normal","value":"(","line":7,"start":144,"end":145},{"type":"T_RPAREN","context":"normal","value":")","line":7,"start":145,"end":146},{"type":"T_RCURLY","context":"normal","value":"}","line":7,"start":146,"end":147},{"type":"T_LESS_THAN","context":"jsxTag","value":"<","line":7,"start":147,"end":148},{"type":"T_DIV","context":"jsxTag","value":"/","line":7,"start":148,"end":149},{"type":"T_JSX_IDENTIFIER","context":"jsxTag","value":"Theme","line":7,"start":149,"end":154},{"type":"T_PERIOD","context":"jsxTag","value":".","line":7,"start":154,"end":155},{"type":"T_JSX_IDENTIFIER","context":"jsxTag","value":"Consumer","line":7,"start":155,"end":163},{"type":"T_GREATER_THAN","context":"jsxTag","value":">","line":7,"start":163,"end":164},{"type":"T_SEMICOLON","context":"normal","value":";","line":7,"start":164,"end":165},{"type":"Line","context":"comment","value":"// Error! `value` is nullable.","line":7,"start":166,"end":196},{"type":"T_LESS_THAN","context":"jsxTag","value":"<","line":9,"start":198,"end":199},{"type":"T_JSX_IDENTIFIER","context":"jsxTag","value":"Theme","line":9,"start":199,"end":204},{"type":"T_PERIOD","context":"jsxTag","value":".","line":9,"start":204,"end":205},{"type":"T_JSX_IDENTIFIER","context":"jsxTag","value":"Consumer","line":9,"start":205,"end":213},{"type":"T_GREATER_THAN","context":"jsxTag","value":">","line":9,"start":213,"end":214},{"type":"T_JSX_TEXT","context":"jsxChild","value":"\n ","line":9,"start":214,"end":217},{"type":"T_LCURLY","context":"normal","value":"{","line":10,"start":217,"end":218},{"type":"T_IDENTIFIER","context":"normal","value":"value","line":10,"start":218,"end":223},{"type":"T_ARROW","context":"normal","value":"=>","line":10,"start":224,"end":226},{"type":"T_IDENTIFIER","context":"normal","value":"value","line":11,"start":231,"end":236},{"type":"T_PLING","context":"normal","value":"?","line":12,"start":243,"end":244},{"type":"T_IDENTIFIER","context":"normal","value":"value","line":12,"start":245,"end":250},{"type":"T_PERIOD","context":"normal","value":".","line":12,"start":250,"end":251},{"type":"T_IDENTIFIER","context":"normal","value":"toUpperCase","line":12,"start":251,"end":262},{"type":"T_LPAREN","context":"normal","value":"(","line":12,"start":262,"end":263},{"type":"T_RPAREN","context":"normal","value":")","line":12,"start":263,"end":264},{"type":"Line","context":"comment","value":"// Valid: `value` is a string.","line":12,"start":265,"end":295},{"type":"T_COLON","context":"normal","value":":","line":13,"start":302,"end":303},{"type":"T_NULL","context":"normal","value":"null","line":13,"start":304,"end":308},{"type":"T_RCURLY","context":"normal","value":"}","line":14,"start":311,"end":312},{"type":"T_JSX_TEXT","context":"jsxChild","value":"\n","line":14,"start":312,"end":313},{"type":"T_LESS_THAN","context":"jsxTag","value":"<","line":15,"start":313,"end":314},{"type":"T_DIV","context":"jsxTag","value":"/","line":15,"start":314,"end":315},{"type":"T_JSX_IDENTIFIER","context":"jsxTag","value":"Theme","line":15,"start":315,"end":320},{"type":"T_PERIOD","context":"jsxTag","value":".","line":15,"start":320,"end":321},{"type":"T_JSX_IDENTIFIER","context":"jsxTag","value":"Consumer","line":15,"start":321,"end":329},{"type":"T_GREATER_THAN","context":"jsxTag","value":">","line":15,"start":329,"end":330},{"type":"T_SEMICOLON","context":"normal","value":";","line":15,"start":330,"end":331}],"errors":[]}
If your context has a default value, Flow will type your consumer component accordingly:
1 2 3 4 5 |
|
{"value":"import React from \"react\";\n\nconst Theme = React.createContext(\"light\");\n\n<Theme.Consumer>{value => value.toUpperCase()}</Theme.Consumer>; // Valid: `value` is a non-nullable string.\n","tokens":[{"type":"T_IMPORT","context":"normal","value":"import","line":1,"start":0,"end":6},{"type":"T_IDENTIFIER","context":"normal","value":"React","line":1,"start":7,"end":12},{"type":"T_IDENTIFIER","context":"normal","value":"from","line":1,"start":13,"end":17},{"type":"T_STRING","context":"normal","value":"\"react\"","line":1,"start":18,"end":25},{"type":"T_SEMICOLON","context":"normal","value":";","line":1,"start":25,"end":26},{"type":"T_CONST","context":"normal","value":"const","line":3,"start":28,"end":33},{"type":"T_IDENTIFIER","context":"normal","value":"Theme","line":3,"start":34,"end":39},{"type":"T_ASSIGN","context":"normal","value":"=","line":3,"start":40,"end":41},{"type":"T_IDENTIFIER","context":"normal","value":"React","line":3,"start":42,"end":47},{"type":"T_PERIOD","context":"normal","value":".","line":3,"start":47,"end":48},{"type":"T_IDENTIFIER","context":"normal","value":"createContext","line":3,"start":48,"end":61},{"type":"T_LPAREN","context":"normal","value":"(","line":3,"start":61,"end":62},{"type":"T_STRING","context":"normal","value":"\"light\"","line":3,"start":62,"end":69},{"type":"T_RPAREN","context":"normal","value":")","line":3,"start":69,"end":70},{"type":"T_SEMICOLON","context":"normal","value":";","line":3,"start":70,"end":71},{"type":"T_LESS_THAN","context":"jsxTag","value":"<","line":5,"start":73,"end":74},{"type":"T_JSX_IDENTIFIER","context":"jsxTag","value":"Theme","line":5,"start":74,"end":79},{"type":"T_PERIOD","context":"jsxTag","value":".","line":5,"start":79,"end":80},{"type":"T_JSX_IDENTIFIER","context":"jsxTag","value":"Consumer","line":5,"start":80,"end":88},{"type":"T_GREATER_THAN","context":"jsxTag","value":">","line":5,"start":88,"end":89},{"type":"T_LCURLY","context":"normal","value":"{","line":5,"start":89,"end":90},{"type":"T_IDENTIFIER","context":"normal","value":"value","line":5,"start":90,"end":95},{"type":"T_ARROW","context":"normal","value":"=>","line":5,"start":96,"end":98},{"type":"T_IDENTIFIER","context":"normal","value":"value","line":5,"start":99,"end":104},{"type":"T_PERIOD","context":"normal","value":".","line":5,"start":104,"end":105},{"type":"T_IDENTIFIER","context":"normal","value":"toUpperCase","line":5,"start":105,"end":116},{"type":"T_LPAREN","context":"normal","value":"(","line":5,"start":116,"end":117},{"type":"T_RPAREN","context":"normal","value":")","line":5,"start":117,"end":118},{"type":"T_RCURLY","context":"normal","value":"}","line":5,"start":118,"end":119},{"type":"T_LESS_THAN","context":"jsxTag","value":"<","line":5,"start":119,"end":120},{"type":"T_DIV","context":"jsxTag","value":"/","line":5,"start":120,"end":121},{"type":"T_JSX_IDENTIFIER","context":"jsxTag","value":"Theme","line":5,"start":121,"end":126},{"type":"T_PERIOD","context":"jsxTag","value":".","line":5,"start":126,"end":127},{"type":"T_JSX_IDENTIFIER","context":"jsxTag","value":"Consumer","line":5,"start":127,"end":135},{"type":"T_GREATER_THAN","context":"jsxTag","value":">","line":5,"start":135,"end":136},{"type":"T_SEMICOLON","context":"normal","value":";","line":5,"start":136,"end":137},{"type":"Line","context":"comment","value":"// Valid: `value` is a non-nullable string.","line":5,"start":138,"end":181}],"errors":[]}
To explicitly specify the type of a context value, pass a type parameter to
createContext
:
1 2 3 4 5 |
|
{"value":"import React from \"react\";\n\nconst Theme = React.createContext<\"light\" | \"dark\">(\"light\");\n\n<Theme.Provider value=\"blue\" />; // Error! \"blue\" is not one of the allowed values.\n","tokens":[{"type":"T_IMPORT","context":"normal","value":"import","line":1,"start":0,"end":6},{"type":"T_IDENTIFIER","context":"normal","value":"React","line":1,"start":7,"end":12},{"type":"T_IDENTIFIER","context":"normal","value":"from","line":1,"start":13,"end":17},{"type":"T_STRING","context":"normal","value":"\"react\"","line":1,"start":18,"end":25},{"type":"T_SEMICOLON","context":"normal","value":";","line":1,"start":25,"end":26},{"type":"T_CONST","context":"normal","value":"const","line":3,"start":28,"end":33},{"type":"T_IDENTIFIER","context":"normal","value":"Theme","line":3,"start":34,"end":39},{"type":"T_ASSIGN","context":"normal","value":"=","line":3,"start":40,"end":41},{"type":"T_IDENTIFIER","context":"normal","value":"React","line":3,"start":42,"end":47},{"type":"T_PERIOD","context":"normal","value":".","line":3,"start":47,"end":48},{"type":"T_IDENTIFIER","context":"normal","value":"createContext","line":3,"start":48,"end":61},{"type":"T_LESS_THAN","context":"type","value":"<","line":3,"start":61,"end":62},{"type":"T_STRING","context":"type","value":"\"light\"","line":3,"start":62,"end":69},{"type":"T_BIT_OR","context":"type","value":"|","line":3,"start":70,"end":71},{"type":"T_STRING","context":"type","value":"\"dark\"","line":3,"start":72,"end":78},{"type":"T_GREATER_THAN","context":"type","value":">","line":3,"start":78,"end":79},{"type":"T_LPAREN","context":"normal","value":"(","line":3,"start":79,"end":80},{"type":"T_STRING","context":"normal","value":"\"light\"","line":3,"start":80,"end":87},{"type":"T_RPAREN","context":"normal","value":")","line":3,"start":87,"end":88},{"type":"T_SEMICOLON","context":"normal","value":";","line":3,"start":88,"end":89},{"type":"T_LESS_THAN","context":"jsxTag","value":"<","line":5,"start":91,"end":92},{"type":"T_JSX_IDENTIFIER","context":"jsxTag","value":"Theme","line":5,"start":92,"end":97},{"type":"T_PERIOD","context":"jsxTag","value":".","line":5,"start":97,"end":98},{"type":"T_JSX_IDENTIFIER","context":"jsxTag","value":"Provider","line":5,"start":98,"end":106},{"type":"T_JSX_IDENTIFIER","context":"jsxTag","value":"value","line":5,"start":107,"end":112},{"type":"T_ASSIGN","context":"jsxTag","value":"=","line":5,"start":112,"end":113},{"type":"T_JSX_TEXT","context":"jsxTag","value":"\"blue\"","line":5,"start":113,"end":119},{"type":"T_DIV","context":"jsxTag","value":"/","line":5,"start":120,"end":121},{"type":"T_GREATER_THAN","context":"jsxTag","value":">","line":5,"start":121,"end":122},{"type":"T_SEMICOLON","context":"normal","value":";","line":5,"start":122,"end":123},{"type":"Line","context":"comment","value":"// Error! \"blue\" is not one of the allowed values.","line":5,"start":124,"end":174}],"errors":[]}
Was this guide helpful? Let us know by sending a message to @flowtype.