use-simple-localstorage

Un hook de React ligero para manejar valores en localStorage de manera sencilla y tipada.

Instalación

npm install use-simple-localstorage
# o
yarn add use-simple-localstorage
# o
pnpm add use-simple-localstorage
# o
bun install use-simple-localstorage

Uso

import { useSimpleLocalStorage } from 'use-simple-localstorage'

function App() {
  const [name, setName] = useSimpleLocalStorage <string> 'username';

  return (
    <div>
      <p>Nombre guardado: {name}</p>
      <input
        type='text'
        value={name ?? ''}
        onChange={(e) => setName(e.target.value)}
      />
    </div>
  );
}

API

useSimpleLocalStorage<T>(key: string): [T | null, (val: T) => void]

• key: clave bajo la que se almacenará el valor en localStorage.

• T: tipo del valor a guardar (ejemplo: string, number, User, etc).

Ejemplos

Guardar un número

const [count, setCount] = useSimpleLocalStorage<number>('counter')

Guardar un objeto

type User = {
  id: number
  name: string
}

const [user, setUser] = useSimpleLocalStorage<User>('user')

Consideraciones

• Este hook solo funciona en entornos con localStorage disponible (navegadores).
• Los valores se serializan con JSON.stringify y se parsean con JSON.parse.
• Si guardas valores complejos, asegúrate de que sean serializables

MIT © 2025 Merling Samuel Sobalvarro Reyes