useLocalStorage (React Hook)

import { useState, useEffect } from 'react';

function useLocalStorage(key, initialValue) {
  const [storedValue, setStoredValue] = useState(() => {
    try {
      const item = window.localStorage.getItem(key);
      return item ? JSON.parse(item) : initialValue;
    } catch (error) {
      return initialValue;
    }
  });

  useEffect(() => {
    window.localStorage.setItem(key, JSON.stringify(storedValue));
  }, [key, storedValue]);

  return [storedValue, setStoredValue];
}

export default useLocalStorage;

Användning

Denna React hooken kan användas för att spara och hämta data i localStorage. Detta kan vara användbart för att spara tillståndet i en komponent, så att det finns kvar även om användaren laddar om sidan eller stänger ner webbläsaren.

Ett exempel på användning:

import useLocalStorage from '../hooks/useLocalStorage';

function ThemeSwitcher() {
  const [theme, setTheme] = useLocalStorage('theme', 'light');  // Använd hook för att få och spara tema

  const toggleTheme = () => {
    if (theme === 'light') {
      setTheme('dark');
    } else {
      setTheme('light');
    }
  };

  // Sätt klassnamn baserat på tema
  document.body.className = theme;

  return (
    <button onClick={toggleTheme}>
      Byt till {theme === 'light' ? 'mörkt' : 'ljus'} tema
    </button>
  );
}

export default ThemeSwitcher;