React useContext Hook

Pass data parent to child component and child to parent.

Provide using pass value. parent to child component.

Without manually pass data.

Run this code and see the output. using Provider in app.js file pass day Tuesday. and in child component ChildUseContext button onClick pass Day data to parent component.

Example : 1 

...react-practical\src\useContext\UserContext.js

// UserContext.js

import { createContext, useContext } from 'react';

const UserContext = createContext();

export const UserProvider = ({ children }) => {

    const user = {

        name: 'Ankit Vyas',

        role: 'Admin',

    };

    return (

        <UserContext.Provider value={user}>

            {children}

        </UserContext.Provider>

    );

};

// Custom hook for cleaner access

export const useUser = () => useContext(UserContext);

...\react-practical\src\App.js

import Dashboard from './component/Dashboard';

import { UserProvider } from './useContext/UserContext';

function App() {

  return (

    <div className="App">

      <UserProvider>

        <Dashboard />

      </UserProvider>

    </div>

  );

}

export default App;

...\react-practical\src\component\Dashboard.jsx

// Dashboard.jsx

import { useUser } from "../useContext/UserContext";

const Dashboard = () => {

  const user = useUser();

  return (

    <div>

      <h2>Dashboard</h2>

      Name : {user.name}

    </div>

  );

};

export default Dashboard;

Example : 2

...\react-practical\src\useContext\ThemeContext.jsx

// ThemeContext.jsx

import { createContext, useContext, useState } from 'react';

const ThemeContext = createContext();

const themes = {

  light: {

    background: '#ffffff',

    color: '#000000',

    label: 'Light',

  },

  dark: {

    background: '#222222',

    color: '#ffffff',

    label: 'Dark',

  },

};

export const ThemeProvider = ({ children }) => {

  const [themeName, setThemeName] = useState('light');

  const toggleTheme = () => {

    setThemeName((prev) => (prev === 'light' ? 'dark' : 'light'));

  };

  const theme = themes[themeName];

  return (

    <ThemeContext.Provider value={{ theme, toggleTheme, themeName }}>

      {children}

    </ThemeContext.Provider>

  );

};

export const useTheme = () => useContext(ThemeContext);

...\react-practical\src\App.js

import Dashboard from './component/Dashboard';

import { ThemeProvider } from './useContext/ThemeContext';

function App() {

  return (

    <div className="App">

      <ThemeProvider>

        <Dashboard />

      </ThemeProvider>

    </div>

  );

}

export default App;

...\react-practical\src\component\Dashboard.jsx

// Dashboard.jsx

import { useTheme } from "../useContext/ThemeContext";

const Dashboard = () => {

    const { theme, toggleTheme, themeName } = useTheme();

    return (

        <div style={{ background: theme.background, color: theme.color, height: '100vh', padding: '2rem' }}>

            <h2>Dashboard : {themeName}</h2>

            <p>Current Theme: <strong>{theme.label}</strong></p>

            <button onClick={toggleTheme}>

                Toggle to {themeName === 'light' ? 'Dark' : 'Light'} Mode

            </button>

        </div>

    );

};

export default Dashboard;