1. useContext

useContext is a React Hook that enables function components to share data across the component tree without manuall passing props down.


2. Sample Code

This sample code means that functional component share data whether this app is on dark mode using useContext.

App.js

import logo from './logo.svg';
import './App.css';
import { useState, useEffect, useRef } from 'react';
import Timer from './component/Timer';
import Page from './component/Page.jsx'
import {ThemeContext} from './context/ThemeContext'

function App() {
const [isDark, setIsDark] = useState(false)
return (
<ThemeContext.Provider value={{isDark, setIsDark}}>    //insert data into usecontext
<Page/>
</ThemeContext.Provider>
)
}

export default App;


Page.jsx

import { useContext} from 'react';
import React from 'react'
import Footer from './Footer'
import Content from './Content'
import Header from './Header';
import { ThemeContext } from '../context/ThemeContext';

const Page = () => {
const {isDark, setIsDark} = useContext(ThemeContext)        //share data using useContext
return (
<div>
<Header/>
<Content/>
<Footer/>
</div>
);
}

export default Page;


Header.jsx

import React, {useContext} from 'react'
import { ThemeContext } from '../context/ThemeContext'

const Header = () => {
const {isDark} = useContext(ThemeContext)        //share data using useContext
return (
<header
className='header'
style={{
backgroundColor: isDark ? 'black' : 'lightgray',
color : isDark ? 'white' : 'black'
}}>
<h1>Welcome User!</h1>
</header>
)

}

export default Header


Content.jsx

import React, { useContext } from "react";
import { ThemeContext } from "../context/ThemeContext";

const Content = () => {
const {isDark} = useContext(ThemeContext)    //share data using useContext
return (
<div
className="content"
style={{
backgroundColor: isDark ? 'black' : 'white',
color : isDark ? 'white' : 'black'
}}>
<p>User, Have a good time</p>
</div>
)
}

export default Content


Footer.jsx

import React, {useContext} from "react";
import { ThemeContext } from "../context/ThemeContext";

const Footer = () => {
const {isDark, setIsDark} = useContext(ThemeContext)    //share data using useContext
const toggleTheme = () => {
setIsDark(!isDark)
}

return (
<footer
className="footer"
style={{
backgroundColor : isDark ? 'black' : 'lightgray',
color : isDark ? 'white' : 'black'
}}>
<button className="button" onClick={toggleTheme}>DarkMode</button>

</footer>
)
}

export default Footer;


Theme.Context.js

import {createContext} from 'react';

export const ThemeContext = createContext(null)    //define Context to share data


visit below url if you want to see full code:

https://github.com/antwhale/react_hook_practice.git