diff --git a/README.md b/README.md index f780fb4c..922b31c0 100644 --- a/README.md +++ b/README.md @@ -16,6 +16,7 @@ - [Useful React Type Examples](#useful-react-type-examples) - [Forms and Events](#forms-and-events) - [Higher Order Components/Render Props](#higher-order-components-render-props) +- [Context](#context) - [References/createRef](#references-createref) - [Component/Design System Development](#component-design-system-development) - [Building](#building) @@ -50,7 +51,7 @@ 1. is the officially recommended Typescript fork of `create-react-app`. > CodeSandbox has a [React TypeScript template](https://codesandbox.io/s/react-ts) based on this project. - + 2. sets up a React + Typescript app with Parcel :) 3. for manual setup of React + Typescript + Webpack + Babel @@ -127,7 +128,7 @@ class App extends React.Component<{ }, { count: number, // this is the state type }> { - state = { + state = { count: 0 } render() { @@ -347,6 +348,60 @@ export interface Props { This is not yet written. Please PR or [File an issue](https://github.com/sw-yx/react-typescript-cheatsheet/issues/new) with your suggestions! +# Context + +Using the new context API `React.createContext`: + +```tsx +interface ProviderState { + themeColor: string +} + +interface UpdateStateArg { + key: keyof ProviderState + value: string +} + +interface ProviderStore { + state: ProviderState + update: (arg: UpdateStateArg) => void +} + +const Context = React.createContext({} as ProviderStore) + +class Provider extends React.Component<{}, ProviderState> { + public readonly state = { + themeColor: 'red' + } + + private update = ({ key, value }: UpdateStateArg) => { + this.setState({ [key]: value }) + } + + public render() { + const store: ProviderStore = { + state: this.state, + update: this.update + } + + return ( + + {this.props.children} + + ) + } +} + +const Consumer = Context.Consumer +``` + +
+ +Explanation + +This is not yet written. Please PR or [File an issue](https://github.com/sw-yx/react-typescript-cheatsheet/issues/new) with your suggestions! +
+ # References/createRef Use a `React.RefObject`: