import {useState, createContext, useEffect} from 'react' export const ThemeContext = createContext(); export default function ThemeContextProvider(props){ //create the global state const [darkMode, setDarkMode] = useState(false) //get inital state from localStorage when page loads useEffect( ()=>{ //is there a value in localStorage const storedDarkMode = localStorage.getItem('darkMode') // if (storedDarkMode){ // //console.log('datatype is ', typeof(storedDarkMode)) // //setDarkMode(storedDarkMode) // //parse converts from string to its datatype // setDarkMode(JSON.parse(storedDarkMode)) // } setDarkMode(storedDarkMode?JSON.parse(storedDarkMode):false) //otherwise will use default state value }, [] ) //save to localStorage whenever it changes useEffect( ()=>{ //save current state to localStorage when it changes //stringify converts to JSON string format localStorage.setItem('darkMode', JSON.stringify(darkMode)) //localStorage.setItem('darkMode', darkMode) }, [darkMode] ) return( <ThemeContext.Provider value={{ darkMode, setDarkMode }} > {props.children} </ThemeContext.Provider> ) }
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter