How can I use React hooks for theming in my application?

How can I use React hooks for theming in my application?

You can create a custom hook that manages theme state and provides a way to toggle between themes.

Can you show me an example of such a custom hook?

Sure! Here's a simple example:

import { useState, useEffect } from 'react';

const useTheme = () => {
  const [theme, setTheme] = useState('light');

  const toggleTheme = () => {
    setTheme((prevTheme) => (prevTheme === 'light' ? 'dark' : 'light'));
  };

  useEffect(() => {
    document.body.className = theme;
  }, [theme]);

  return { theme, toggleTheme };
};

This hook allows you to toggle between light and dark themes.

How do I use this hook in my components?

You can use the hook like this:

import React from 'react';
import useTheme from './useTheme';

const App = () => {
  const { theme, toggleTheme } = useTheme();

  return (
    <div>
      <h1>Current Theme: {theme}</h1>
      <button onClick={toggleTheme}>Toggle Theme</button>
    </div>
  );
};

This will display the current theme and allow you to toggle it.