DEV Community

AKSH DESAI
AKSH DESAI

Posted on

react useContext() Hook - web dev simplified

#webdev #javascript #react #beginners

Part1 Code:-

Folder Structure :-
Folder Output

Output Photo :-
Output Image

App.js Code:-

import { createContext, useState } from 'react' import FunctionContextComponent from './FunctionContextComponent' import ClassContextComponent from './ClassContextComponent' export const ThemeContext = createContext(); export default function App() { const [darkTheme, setDarkTheme] = useState(true); // eslint-disable-next-line const [timepass, setTimepass] = useState("initialState"); function toggleTheme() { setDarkTheme(prevTheme => !prevTheme); }; return ( <ThemeContext.Provider value={{ darkTheme, timepass }}> <button onClick={toggleTheme}>Toggle Theme</button> - {darkTheme ? "true" : "false"} <FunctionContextComponent /> <ClassContextComponent /> </ThemeContext.Provider> ) }
Enter fullscreen mode Exit fullscreen mode

FunctionContextComponent.js :-

import { useContext } from 'react' import { ThemeContext } from './App'; export default function FunctionContextComponent() { const theme = useContext(ThemeContext); const style = { backgroundColor: theme.darkTheme ? "grey" : "white", color: theme.darkTheme ? "white" : "black", padding: "2rem", margin: "2rem" } return ( <div style={style}> Function Theme </div> ) }
Enter fullscreen mode Exit fullscreen mode

ClassContextComponent.js :-

import React, { Component } from 'react' import { ThemeContext } from './App' export default class ClassContextComponent extends Component { style(dark) { return { backgroundColor: dark ? "#123445" : "white", color: dark ? "white" : "black", padding: "2rem", margin: "2rem" } } render() { return ( <ThemeContext.Consumer> {(theme) => { return <div style={this.style(theme.darkTheme)}> ClassContextComponent </div> }} </ThemeContext.Consumer> ) } }
Enter fullscreen mode Exit fullscreen mode

Part2 Source Code

Folder Structure

Folder Output

index.js code :-

import React from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; import App from './App'; import reportWebVitals from './reportWebVitals'; import { ThemeContext } from "./Theme.js"; const root = ReactDOM.createRoot(document.getElementById('root')); root.render( <ThemeContext> <App /> </ThemeContext> ); // If you want to start measuring performance in your app, pass a function // to log results (for example: reportWebVitals(console.log)) // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals reportWebVitals();
Enter fullscreen mode Exit fullscreen mode

App.js Code :-

import { createContext, useState, useContext } from 'react' import FunctionContextComponent from './FunctionContextComponent' import ClassContextComponent from './ClassContextComponent' import { ThemeContext, ThemeContext1 } from "./Theme.js"; export default function App() { const theme = useContext(ThemeContext1); return ( <> <button onClick={theme.toggleTheme}>Toggle Theme</button> <FunctionContextComponent /> <ClassContextComponent /> </> ) }
Enter fullscreen mode Exit fullscreen mode

FunctionContextComponent.js

import { useContext } from 'react' import { ThemeContext1 } from './Theme'; export default function FunctionContextComponent() { const theme = useContext(ThemeContext1); const style = { backgroundColor: theme.darkTheme ? "grey" : "white", color: theme.darkTheme ? "white" : "black", padding: "2rem", margin: "2rem" } return ( <> <div style={style}> Function Theme </div> </> ) }
Enter fullscreen mode Exit fullscreen mode

ClassContextComponent.js

import React, { Component } from 'react' import { ThemeContext1 } from './Theme' export default class ClassContextComponent extends Component { style(dark) { return { backgroundColor: dark ? "#123445" : "white", color: dark ? "white" : "black", padding: "2rem", margin: "2rem" } } render() { return ( <ThemeContext1.Consumer> {(theme) => { return <div style={this.style(theme.darkTheme)}> ClassContextComponent </div> }} </ThemeContext1.Consumer> ) } }
Enter fullscreen mode Exit fullscreen mode

Theme.js Code

import { useState, createContext, useContext } from 'react'; export const ThemeContext1 = createContext(); export function ThemeContext(props) { const [darkTheme, setDarkTheme] = useState(true); // eslint-disable-next-line const [timepass, setTimepass] = useState("initialState"); const toggleTheme = () => { return setDarkTheme(prevTheme => !prevTheme); }; return ( <ThemeContext1.Provider value={{ darkTheme, toggleTheme, timepass }}> {props.children} </ThemeContext1.Provider> ) }
Enter fullscreen mode Exit fullscreen mode

Thank You.
You can follow us on:
Youtube
Instagram

Top comments (0)