ReactContext #React

ReactContext.md

React Context

example

// MyContext.js
import React from 'react'
const MyContext = createContext()
export default MyContext

// App.js
<MyContext.Provider value={values}>
<App />
</MyContext.Provider>

Properties on context

• MyContext.Provider
• MyContext.Consumer

Provider

allows us to declare data that we want available throughout our component tree.

<MyContext.Provider value={values}>
<App />
</MyContext.Provider>

Consumer

Allows any component in the component tree that needs that data to be able to subscribe to it.

<MyContext.Consumer>
 { (data) => return <h1>{data}</h1> }
</MyContext.Consumer>