use-local-storage-state

What is use-local-storage-state?

The use-local-storage-state package is a React hook that simplifies the use of localStorage in React applications. It provides a way to persist state in localStorage, making it easy to manage and synchronize state with localStorage automatically.

What are use-local-storage-state's main functionalities?

Persisting State

This feature allows you to persist a piece of state in localStorage. The hook returns a stateful value and a function to update it, similar to useState, but the value is also stored in localStorage under the specified key.

import useLocalStorageState from 'use-local-storage-state';

function App() {
  const [name, setName] = useLocalStorageState('name', '');

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

Default Value

You can provide a default value that will be used if there is no existing value in localStorage. This makes it easy to initialize state with a default value.

import useLocalStorageState from 'use-local-storage-state';

function App() {
  const [count, setCount] = useLocalStorageState('count', 0);

  return (
    <div>
      <button onClick={() => setCount(count + 1)}>Increment</button>
      <p>Count: {count}</p>
    </div>
  );
}

JSON Support

The hook supports storing complex data structures like objects and arrays in localStorage by automatically handling JSON serialization and deserialization.

import useLocalStorageState from 'use-local-storage-state';

function App() {
  const [user, setUser] = useLocalStorageState('user', { name: '', age: 0 });

  return (
    <div>
      <input
        type="text"
        value={user.name}
        onChange={(e) => setUser({ ...user, name: e.target.value })}
      />
      <input
        type="number"
        value={user.age}
        onChange={(e) => setUser({ ...user, age: Number(e.target.value) })}
      />
      <p>{user.name} is {user.age} years old.</p>
    </div>
  );
}

Other packages similar to use-local-storage-state

react-use

react-use is a collection of essential React Hooks, including a useLocalStorage hook. It provides similar functionality to use-local-storage-state but as part of a larger suite of hooks. It may be more suitable if you need a variety of hooks in addition to localStorage management.

usehooks-ts

usehooks-ts is a collection of React hooks written in TypeScript, including a useLocalStorage hook. It offers similar functionality to use-local-storage-state with TypeScript support, making it a good choice for TypeScript projects.

use-persisted-state

use-persisted-state is another React hook for persisting state in localStorage. It provides a similar API to use-local-storage-state but is more lightweight, focusing solely on state persistence without additional features.

README

use-local-storage-state

Like useState() but for local storage

Install

$ npm install use-local-storage-state

Why?

Why this module even exists? There are more than a few libraries to achieve almost the same thing. I created this module in frustration with the big number of non-optimal solutions. Below are the things that this module does right. All bullets are things that some other library isn't doing. Put all together there isn't a single library that solves all these problems:

• Written in TypeScript. useLocalStorageState() returns absolutely the same type as React useState().
• Uses JSON.parse() and JSON.stringify() to support non string values.
• Subscribes to the Window storage event which tracks changes across browser tabs and iframe's.
• Used in a production application which is based on Caret - Markdown Editor for Mac / Windows and is in private beta.

Usage

const [todos, setTodos] = useLocalStorageState('todos', [
    'buy milk',
    'do 50 push-ups'
])

Complete todo list example:

import React, { useState } from 'react'
import useLocalStorageState from 'use-local-storage-state'

export default function Todos() {
    const [query, setQuery] = useState('')
    const [todos, setTodos] = useLocalStorageState('todos', ['buy milk'])

    function onClick() {
        setTodos([...todos, query])
    }

    return (
        <>
            <input value={query} onChange={e => setQuery(e.target.value)} />
            <button onClick={onClick}>Create</button>
            {todos.map(todo => (<div>{todo}</div>))}
        </>
    )
}