useContext – Theme Switcher (Dark / Light Mode)

// ThemeContext.js
import { createContext } from 'react';

const ThemeContext = createContext();
export default ThemeContext;

Langkah 2: Provider untuk Theme
 jsxCopyEdit// ThemeProvider.js
import React, { useState } from 'react';
import ThemeContext from './ThemeContext';

export default function ThemeProvider({ children }) {
  const [theme, setTheme] = useState('light');

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

  return (
    <ThemeContext.Provider value={{ theme, toggleTheme }}>
      {children}
    </ThemeContext.Provider>
  );
}

Langkah 3: Konsumsi useContext di Komponen

// App.js
import React, { useContext } from 'react';
import ThemeProvider from './ThemeProvider';
import ThemeContext from './ThemeContext';

function ThemedComponent() {
  const { theme, toggleTheme } = useContext(ThemeContext);

  const styles = {
    backgroundColor: theme === 'light' ? '#fff' : '#222',
    color: theme === 'light' ? '#000' : '#fff',
    padding: '1rem',
    textAlign: 'center',
  };

  return (
    <div style={styles}>
      <h1>{theme.toUpperCase()} MODE</h1>
      <button onClick={toggleTheme}>Toggle Theme</button>
    </div>
  );
}

export default function App() {
  return (
    <ThemeProvider>
      <ThemedComponent />
    </ThemeProvider>
  );
}

Penjelasan useContext:

• useContext(ThemeContext) digunakan untuk membaca nilai dari context.
• Menghindari prop drilling (tidak perlu oper prop theme dan toggleTheme ke banyak komponen secara manual).