Never Publish Malarkey

    @phntms/use-local-state
    TypeScript icon, indicating that this package has built-in type declarations

    0.1.4 • Public • Published

    use-local-state

    NPM version Actions Status PR Welcome

    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.

    Install

    npm i @phntms/use-local-state

    DownloadsWeekly Downloads

    15

    Version

    0.1.4

    License

    MIT

    Unpacked Size

    34.6 kB

    Total Files

    30

    Last publish

    Collaborators

    • dhiaphntm
    • jpedersen
    • digitaljohn
    • paulomfj