Context API + Hooks : Building minimalist Dark Mode

Why this hook ?

The react application (Complex), data is passed in top-down approach (Parent-to-children components) and this made the manual passing of props more complicated. The props for (Example: UI Theme, Local Preferences) become "cumbersome". So Facebook engineers made some efforts to save us. (Developed another Hook).

What is useContext() hooks ?

Context provides a way to pass data through the component tree without having to pass props down manually at every level.

import React, { useContext } from 'react';

When to use ?

Context is designed to share data that can be considered “global” for a tree of React components, such as the current authenticated user, theme, or preferred language.

One of the use Case: (Making UI Theme) 🌗

we will be learning Context in different steps below:

• Setting up Children.js (passing props to child component).
• Setting up App.js (creating Context).
• Setting up Colorify.js (tweaking UI themes from child).

Setting up Children.js.

• Make a Colorify.js file, which will later contain buttons and some logic to toggle from dark Mode and Light Mode.
• Now make a new component file named Children.js, which will act as a parent for his Child Component Colorify.js

see the below diagram to understand the flow of data.

• The main gotcha is that... The props will be passed to children.js component and will be accessed down the REACT DOM component i.e to its child components.

Note: more the children, all of them can have access to the props passed to children.js.

import React from "react";
import Colorify from "./Colorify";

export default function Children() {
  return (
    <div>
      <Colorify /> // passing children Component
    </div>
  );
}

Setting up App.js (Creating Context).

• Import children component Children.js.
• Making themes Object.

const themes = {
  light: {
    foreground: "#000",
    background: "#fff"
  },
  dark: {
    foreground: "#fff",
    background: "#000"
  }
};

• Now it's time to creating context: (Moment of truth).

export const ThemeContext = React.createContext(themes);

This line of code means, we are exporting the initialized Context created as ThemeContext and passing the themes props(value) as an argument.

• Inside functional Component, passer a wrapper component <ThemeContext.Provider> which has a value prop pass the theme object as the value prop.

• And inside the wrapper component pass the children Component where the props need to pass.

• This complete piece of code means that ... You are passing object themes as the default value to prop, that is passed to child component in React DOM Hierarchy.
  

export default function App() {
  return (
    <ThemeContext.Provider value={themes}> // wrapper Component
      <Children />  // children Component (Props will be passed and accessed to it.)
    </ThemeContext.Provider>
  );
}

• The Complete Code for App.js is below:

// Complete app.js code

import "./styles.css";
import React from "react";
import Children from "./Children";

const themes = {
  light: {
    foreground: "#000",
    background: "#fff"
  },
  dark: {
    foreground: "#fff",
    background: "#000"
  }
};

export const ThemeContext = React.createContext(themes);

export default function App() {
  return (
    <ThemeContext.Provider value={themes}> // wrapper Component
      <Children />  // children Component (Props will be passed and accessed to it.)
    </ThemeContext.Provider>
  );
}

Setting up Colorify.js Component (Final Logic)

• The final logic for changing UI Theme from dark to light and forth.
• Start by importing useContext and useState.

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

• Importing the Context that was created in app.js

import { ThemeContext } from "./App";

• Writing Logic for Dark Mode:

export default function Colorify() {
  const theme = useContext(ThemeContext);
  const [state, setState] = useState(theme.light);
  const darkMode = () => {
    setState(theme.dark);
  };
  const lightMode = () => {
    setState(theme.light);
  };
  return (
    <>
      <div
        style={{
          backgroundColor: state.background,
          color: state.foreground,
          height: 100,
          width: 200,
          margin: 100,
          border: `1px solid ${state.foreground}`
        }}
      ></div>
      <button onClick={darkMode}>Dark Mode!</button>
      <button onClick={lightMode}>Light Mode!</button>
    </>
  );
}

• Dark Mode Functions:

 const darkMode = () => {
    setState(theme.dark);
  };

• Light Mode Functions:

 const lightMode = () => {
    setState(theme.light);
  };

we are just changing state from theme.dark to theme.light
and setting the background color of the Component as state.foreground for text color and state.background for background color.

• The Complete Code for Colorify.js is:

// Complete Code for Colorify.js

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

export default function Colorify() {
  const theme = useContext(ThemeContext);
  const [state, setState] = useState(theme.light);
  const darkMode = () => {
    setState(theme.dark);
  };
  const lightMode = () => {
    setState(theme.light);
  };
  return (
    <>
      <div
        style={{
          backgroundColor: state.background,
          color: state.foreground,
          height: 100,
          width: 200,
          margin: 100,
          border: `1px solid ${state.foreground}`
        }}
      ></div>
      <button onClick={darkMode}>Dark Mode!</button>
      <button onClick={lightMode}>Light Mode!</button>
    </>
  );
}

Check out the preview on codesandbox and play along

Hope you enjoyed the use case for the useContext Hooks.
Please Do comment!
Happy Coding!