This blog is focused about to create a Stateful Application using React Context Api with Hooks. In this App we will Create a stateful app without using redux or any other third party library.
React Context Api used to share data in React component Tree. So we create Global State or Object to share the Data among Nth level of child and siblings under one root.
In This App we will create a theme changing demo where default theme will be passed from Our Top level Component and child component will be able to use that info. Also from child component we will be able to
update that top level theme data and immediately the update theme will reflect in subsequent child
components.
So lets get Started with following Steps to create a Stateful App using React Context Api with Hooks :
Step 1 : Creating a new React App using CRA, you may skip this if you already having React App setup.
To simply create & run a app named react-context-demo just use following statement in any your CLI
|
1 2 3 |
npx create-react-app react-context-demo cd react-context-demo npm start |
Now you have started the React App and it will look like this :
Step 2: Create a file named AppContext.js using following code :
|
1 2 |
import React, { createContext } from 'react'; export default const AppContext = createContext(); |
Step 3: Go to App.js file and replace all code with following code :
|
1 2 3 4 5 6 7 8 9 10 |
import React from 'react'; import './App.css'; const App = () => { return ( <div className="App"> </div> ); } export default App; |
Now you have App component in that we will import the provider from our created Context like this
|
1 |
const { Provider } = AppContext; |
now create a State for default theme like this :
|
1 |
const [theme, setTheme] = useState({name:'dark',backgroundColor:'black',textColor:'white'});//by default light theme |
Now wrap the Div ClassName App using Provider like this :
|
1 2 3 4 5 6 7 |
<Provider value={[theme, setTheme]}> <div className="App"> </div> </Provider> |
To use this default theme data we need to create 2 components, so we are creating 1 component to preview the theme and 1 component to update the theme
Step 4: Create a child component (Child.js) that uses the theme data and simply show a message with following code :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
import React, { useContext } from 'react'; import AppContext from './AppContext'; const Child = () => { const [theme] = useContext(AppContext); return ( <div style={{ backgroundColor: theme.backgroundColor, color: theme.textColor }}> <h4>Why do we use it?</h4> It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like). </div> ); } export default Child; |
Now we need to call this component from App component, so returned jsx will look like this :
|
1 2 3 4 5 6 7 |
return ( <Provider value={[theme, setTheme]}> <div className="App"> <Child /> </div> </Provider> ); |
Lets see how the child component looks now after using the default theme :
Now there is 1 more Step that is required if we want to change the Theme Data/Global Data from any child component, so for that we will make another Toggle component.
Step 5 : Create a Toggle Component to change theme data to override Context Provider’s Default data Make a file named Toggle.Js and use following code in that :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
import React, { useContext } from 'react'; import AppContext from './AppContext'; const Toggle = () => { const [theme, setTheme] = useContext(AppContext); const switchHandler = () => { if (theme.name === 'dark') { //set light theme setTheme({ name: 'light', backgroundColor: 'white', textColor: 'black' }) } else { //set dark theme setTheme({ name: 'dark', backgroundColor: 'black', textColor: 'white' }) } } return ( <button onClick={switchHandler} style={{ backgroundColor: theme.backgroundColor, color: theme.textColor }}> Switch to {(theme.name === 'dark') ? "Light" : "Dark"} Theme </button> ); } export default Toggle; |
Now Use this toggle component in App.js before/After the Child Component, We are calling it before so that it will look on top of child component like this :
|
1 2 3 4 5 6 7 8 |
return ( <Provider value={[theme, setTheme]}> <div className="App"> <Toggle /> <Child /> </div> </Provider> ); |
Let see in Action How its looking.
Now we can see if we click on toggle button then we can easily switch the theme and that theme is also applying on child component immediately.
You may Download the complete source code by clicking this link. Please let me know your thoughts and improvement Ideas over this. Also if you face any kind of difficulties to run or understand that. Please let me know in comments section.
You may Download the complete source code by clicking this link