useLocalStorage()

useLocalStorage<T>(key, initialValue): object

Defined in: src/hooks/state/useLocalStorage.ts:41

A custom React hook for managing state that is synchronized with localStorage. Provides error handling by returning a status object along with the value and setter.

Type Parameters

• T

Parameters

key

string

The key to store the data under in localStorage.

initialValue

T

The initial value to use if no data is stored under the key.

Returns

object

An object containing the stored value, setter function, and error state.

value

value: T

setValue()

setValue: (value) => void

Parameters

value

T | (currentValue) => T

Returns

void

error

error: null | Error

Example

import { useLocalStorage } from '@zl-asica/react';

const MyComponent = () => {
  const { value: name, setValue: setName, error } = useLocalStorage<string>('user_name', 'Guest');

  if (error) {
    return <p>Error: {error.message}</p>;
  }

  return (
    <div>
      <input
        type="text"
        value={name}
        onChange={(e) => setName(e.target.value)}
      />
      <p>Hello, {name}!</p>
    </div>
  );
};