An Interest In:
Web News this Week
- March 28, 2024
- March 27, 2024
- March 26, 2024
- March 25, 2024
- March 24, 2024
- March 23, 2024
- March 22, 2024
Context Api React
Heeeeey guys!
My name is Gustavo Scarpim, and I will show you how to add Context Api simply and quickly to your project.
1 Create a folder called context inside your src folder, example:
2 Inside index we will create your global context, example:
import React from "react"import { ColorDefaultContextProvider } from "./template/components/colors"const GlobalContext = ({ children }) => { return ( <> <ColorDefaultContextProvider>{children}</ColorDefaultContextProvider> </> )}export default GlobalContext
3 I created a folder called components to separate my states, in my colors.js folder I create all my global states related to color, I'm taking the value of localStorage but the correct thing is to get the data from an API.
Well the example below is a "pattern of the context", just follow this step that is in the code below that will work
import React, { createContext, useState } from "react";const colorCard = localStorage.getItem('colorCard')const colorBackAvatar = localStorage.getItem('colorBackAvatar')const colorTitle = localStorage.getItem('colorTitle')const colorSubTitle = localStorage.getItem('colorSubTitle')const DEFAULT_VALUE = { state: { colorCard: colorCard, colorBackAvatar: colorBackAvatar, colorTitle: colorTitle, colorSubTitle: colorSubTitle }, setState: () => { },};const Context = createContext(DEFAULT_VALUE);const ColorDefaultContextProvider = ({ children }) => { const [state, setState] = useState(DEFAULT_VALUE.state); return ( <Context.Provider value={{ state, setState, }} > {children} </Context.Provider> );};export { ColorDefaultContextProvider };export default Context;
5 Finally, just import the context that we will use in your component, down here I show you how to call and edit its global state.
import React, { useContext, useRef } from 'react'import * as S from './styles/custom'import ContextColors from '../context/template/components/colors'export default function Custom() { const { setState: setGlobalState } = useContext(ContextColors) const { state } = useContext(ContextColors); const colorCard = useRef(state.colorSubTitle) const handleChangeColorBackCard = (e) => { setTimeout(() => { //Here Im taking all the state I have in my // context and Im changing a specific state, // then save it in localStorage //(not required to save in localStorage) setGlobalState({ ...state, colorCard: e.target.value }) localStorage.setItem('colorCard', state.colorCard) }, 300) } return ( <S.Container> <S.ContentColor> <input ref={colorCard} defaultValue={state.colorCard} type={'color'} onChange={(e) => handleChangeColorBackCard(e)} /> <S.Label>Background card</S.Label> </S.ContentColor> </S.Container> )}
6 Most importantly, for the context to work throughout your application you need to import it into your main index
import React from 'react';import ReactDOM from 'react-dom';import Context from './context';import App from './App';ReactDOM.render( <React.StrictMode> <Context> <App /> </Context> </React.StrictMode>, document.getElementById('root'));
And ready, you applied your context api to your project:
See the project working:
See the complete code here on GitHub Click here
Check out the Project in action Deploy
Thanks for reading.
Original Link: https://dev.to/guscarpim/context-api-react-49p7
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To