The React context API is a basic way to create global variables that can be passed in the React application. This is an alternative method for “prop drilling”, or passing props from grandfather to father and child, etc. Context is often considered to be simpler, softer to use Redux for state management. . This article will cover some concise, concise steps to get started with Context.
You should read Getting Started with React or Build a React App with Hooks if you are new to React or React hook.
Create context
Imagine having some information you want to be able to use anywhere in the React application. A topic can be done using a Context – for example, on this page, there is a Context serving three topics: dark mode, light, and MS-DOS (on a 404 page). In this simple example, we will use a logged in user.
Create a Context, and call it UserContext. This will provide UserContext.Provider and UserContext.Consumer. What these two components do is simple:
- Provider: component that provides value
- Consumer: value component So let’s create it with React.createContext () in a new file called UserContext.js
1 2 3 4 5 6 7 8 | import React from 'react' const UserContext = React.createContext({}) export const UserProvider = UserContext.Provider export const UserConsumer = UserContext.Consumer export default UserContext |
Pass an empty object in the string to indicate that this data can be filled later by calling the API. You can pre-populate this data with any data you want, in case you don’t retrieve the data via the API.
1 2 | React.createContext(true) |
Providing Context
The provider always needs to exist as a wrapper around the parent element, regardless of the value you choose to consume. We will include the App component in the Provider. Only create a few user values and pass it down as the Prop Provider value.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | src/App.js import React from 'react' import HomePage from './HomePage' import { UserProvider } from './UserContext' function App() { const user = { name: 'Tania', loggedIn: true } return ( <UserProvider value={user}> <HomePage /> </UserProvider> ) } |
Now any children, grandchildren, great-grandchildren, etc. will be able to access the user as a prop. Unfortunately, getting this value is a bit more involved than simply getting it as you can with this.props or this.state
Consumer context
The way you provide context is the same for classes and functional components, but its use is a bit different.
Class component
The traditional way to retrieve Context values is by wrapping the child components in Consumer. From there, you will be able to access prop values as props.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | src/HomePage.js (class example) import React, { Component } from 'react' import { UserConsumer } from './UserContext' class HomePage extends Component { render() { return ( <UserConsumer> {props => { return <div>{props.name}</div> }} </UserConsumer> ) } } |
But what about the life cycle method? What if you need values from the external context of the render? Mode of restriction is limited. Instead, we can do this in a class with contextType, which is a static variable in the class.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | src/HomePage.js (class example) import React, { Component } from 'react' import UserContext from './UserContext' class HomePage extends Component { static contextType = UserContext componentDidMount() { const user = this.context console.log(user) // { name: 'Tania', loggedIn: true } } render() { return null } } |
Functional component and Hooks
With Functional component, you will use useContext as the example below. This is equivalent to static contextType .
1 2 3 4 5 6 7 8 9 10 11 12 | src/HomePage.js import React, { useContext } from 'react' import UserContext from './UserContext' function HomePage() { const user = useContext(UserContext) console.log(user) // { name: 'Tania', loggedIn: true } return null } |
Conclude
- Use
const xContext = React.createContext()to create the context. - Drag
xContext.ProviderandxContext.Consumer out ofxContext Providersurrounds parent component- A class can be used with
static contextType = xContext - A functional component can be used with
const x = useContext(xContext)
Source: https://www.taniarascia.com/using-context-api-in-react/