DEV Community

Henri de la Hoz
Henri de la Hoz

Posted on


Fundamentals of useContext

This hook enables the component (function component) to have access to the React Context, this helps to transfer props from parents to children without explicitly move the whole component tree.

To use this feature we need to follow these steps

Creating a context

import React from "react";

const toggleDarkModel = () => {};

const theme = {
    darkModeActive: false,

const ThemeContext = React.createContext(theme);

export default ThemeContext;
Enter fullscreen mode Exit fullscreen mode

toggleDarkModel is a function that later will be implemented and its purpose is manipulating the state by function components.

Adding provider to the app

import React, { useState } from "react";

import ThemeContext from "./context/ThemeContext";
// Other components

function App() {
    const [darkModeActive, setDarkModeActive] = useState(mode);
    const toggleDarkModel = () => {
    return (
        <ThemeContext.Provider value={{ toggleDarkModel, darkModeActive }}>
        //App goes here

export default App;

Enter fullscreen mode Exit fullscreen mode

As we can see, the function component has the implementation of toggleDarkModel

Consuming our context wherever is needed

When we want to consume the context, we will need to import useContext

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

const Header = () => {
    const { toggleDarkModel, darkModeActive } = useContext(ThemeContext);
    return (
        <div className="Header container">
            <h1 className="title">Crypto Swag</h1>
            <button onClick={toggleDarkModel} className={`button is-small ${darkModeActive ? "is-white" : "is-dark"}`}>
                <span className="icon is-small">
                    <i className={`mdi ${darkModeActive ? "mdi-lightbulb-on" : "mdi-lightbulb-off"}`}></i>

export default Header;

Enter fullscreen mode Exit fullscreen mode

Top comments (0)

Top Posts from the React Ecosystem

1. Changes In The Official React Documentation

The former React Docs Beta has been officially released as the updated React documentation at after years of hard work and refinement. Check out the brand new React Docs: What’s New in the Updated React Docs

2. CRA's Time is Over

React developer team has removed create-react-app (CRA) from official documentation rendering it no longer the default setup method for new projects. The bulky setup, slow, and outdated nature of CRA led to its removal: create-react-app is officially dead

3. How to Fetch Articles for Your Portfolio

Integrate the articles of your profile into your personal portfolio with either React, Vue, or Next.js by following these simple steps. It outlines how to include frontend to pull the information and correctly utilizes the API: How to Fetch Your Articles for Your Portfolio with React