@phntms/use-local-state

use-local-state

A simple React hook that allows you to store data within LocalStorage with the same interface as the standard React.useState hook.

Introduction

Just swap out your useState calls with useLocalState to persist the data between refreshes. This hook is also SSR safe and does not break when used without window existing.

import useLocalState from "@phntms/use-local-state";

const [value, setValue, resetValue] = useLocalState("KEY", "");

Installation

Install this package with npm.

npm i @phntms/use-local-state

Usage

Store a boolean to track if a user has accepted terms of use.

import React from 'react';
import useLocalState from '@phntms/use-local-state';

const TermsExample = () = {
  const [accepted, setAccepted] = useLocalState("TERMS_ACCEPTED", false);

  return (
    <>
      <h1>Welcome</h2>
      {!accepted && <>
        <p>Do you accept our terms?</p>
        <button onClick={()=>setAccepted(true)}>Accept</button>
      </>}
    </>
  );
}

Store a list of bookmarks.

import React from 'react';
import useLocalState from '@phntms/use-local-state';

interface Bookmark {
  title: string;
  url: string;
}

const BookmarkExample = () = {
  const [bookmarks, setBookmarks, clearBookmarks] = useLocalState<Bookmark[]>("BOOKMARKS", []);

  const addBookmark = (bookmark: Bookmark) => setBookmarks([...bookmarks, bookmark]);

  return (
    <>
      <h1>Bookmarks</h2>
      <NewBookmark add={addBookmark} />
      <button onClick={clearBookmarks}>Clear Bookmarks</button>
      <ul>
        {bookmarks.map(((bookmark, i) => (
          <li key={i}>
            <a href={bookmark.url}>{bookmark.title}</a>
          </li>
        )))}
      </ul>
    </>
  );
}

API

Input

• key : Required - The key of type string to store within LocalStorage.
• initialValue : Required - The default/initial value of type T if the key is not found within the LocalStorage object.

Output

An array containing the value, a function to set the value and another function to reset the value.

• [0] : The value of the data stored in LocalStorage or the defaultValue if not set.
• [1] : A function to set the value stored in LocalStorage. Signature is exactly like the standard React.useState hook.
• [2] : A function to reset the data stored in the LocalStorage.