Reddot UI Library

Docs
useLocalStorage

useLocalStorage

Un hook React qui permet de stocker et de récupérer des valeurs dans le localStorage du navigateur, avec une API similaire à celle du hook useState.

Installation

$npx shadcn@latest add https://reddot.dottools.xyz/r/use-local-storage.json

Utilisation

import { useLocalStorage } from '@/hooks/use-local-storage';
 
function Component() {
  const [name, setName] = useLocalStorage('name', '');
 
  return (
    <div>
      <input type="text" value={name} onChange={(e) => setName(e.target.value)} placeholder="Entrez votre nom" />
      <p>Bonjour, {name || 'visiteur'} !</p>
    </div>
  );
}

API

const [value, setValue] = useLocalStorage(key, initialValue);

Paramètres

  • key - La clé utilisée pour stocker la valeur dans localStorage
  • initialValue - La valeur initiale à utiliser si aucune valeur n'existe dans localStorage

Retour

  • value - La valeur actuelle stockée
  • setValue - Une fonction pour mettre à jour la valeur (similaire à celle retournée par useState)

Fonctionnalités

  • Persiste automatiquement les données dans localStorage
  • Supporte les valeurs complexes grâce à JSON.stringify/parse
  • API similaire à useState pour une utilisation familière
  • Gestion des erreurs intégrée
  • Compatible avec le rendu côté serveur (SSR)

Exemple avancé

import { useLocalStorage } from '@/hooks/use-local-storage';
 
function UserPreferences() {
  const [preferences, setPreferences] = useLocalStorage('user-preferences', {
    theme: 'light',
    notifications: true,
    fontSize: 'medium',
  });
 
  const updateTheme = (theme) => {
    setPreferences((prev) => ({
      ...prev,
      theme,
    }));
  };
 
  return (
    <div>
      <h2>Préférences utilisateur</h2>
      <div>
        <label>
          <input
            type="checkbox"
            checked={preferences.theme === 'dark'}
            onChange={(e) => updateTheme(e.target.checked ? 'dark' : 'light')}
          />
          Mode sombre
        </label>
      </div>
      {/* Autres contrôles de préférences */}
    </div>
  );
}

Notes

  • Les valeurs sont automatiquement converties en JSON lors du stockage et reconverties lors de la récupération
  • En cas d'erreur lors de la lecture ou de l'écriture dans localStorage, la valeur initiale est utilisée
  • Le hook est compatible avec le rendu côté serveur et vérifie la disponibilité de window avant d'accéder à localStorage