Breaking News: Grepper is joining You.com. Read the official announcement!

DarkMode react context

Elegant Eel answered on June 18, 2023 Popularity 3/10 Helpfulness 2/10

answer DarkMode react context

DarkMode react context

Comment

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

interface DarkModeContextProps {
  darkMode: boolean;
  setDarkMode: (mode: boolean) => void;
}

const DarkModeContext = createContext<DarkModeContextProps | undefined>(undefined);

interface DarkModeProviderProps {
  children: React.ReactNode;
}

const DarkModeProvider: React.FC<DarkModeProviderProps> = ({ children }) => {
  const initialMode = localStorage.getItem('darkMode') === 'true';
  const [darkMode, setDarkMode] = useState(initialMode);

  useEffect(() => {
    localStorage.setItem('darkMode', darkMode.toString());
  }, [darkMode]);

  const contextValue: DarkModeContextProps = {
    darkMode,
    setDarkMode: (mode) => setDarkMode(mode),
  };

  return (
    <DarkModeContext.Provider value={contextValue}>
      {children}
    </DarkModeContext.Provider>
  );
};

export const useDarkMode = (): DarkModeContextProps => {
  const context = useContext(DarkModeContext);
  if (!context) {
    throw new Error('useDarkMode must be used within a DarkModeProvider');
  }
  return context;
};

export default DarkModeProvider;

Popularity 3/10 Helpfulness 2/10 Language typescript

Source: chat.openai.com

Tags: darkmode react-context typescript

Link to this answer
Share Copy Link

Contributed on Jun 18 2023

Elegant Eel

0 Answers Avg Quality 2/10

DarkMode react context

Contents

More Related Answers

DarkMode react context

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.