A simple hook-based type-safe store for React with out-of-the-box browser persistence

react-persist-store

A simple hook-based type-safe store for React with out-of-the-box browser persistence

View Demo · Report Bug · View on npm

A persistent storage abstraction for React backed by TypeScript.

Features

  • Store and persist data to browser storage by default
  • Declare default values and all types will be inferred automatically
  • Share state across multiple components with a functional approach to store creation

Getting Started

In react-persist-hook data is written to local storage by default. Types are inferred from the default values passed to the createStore function.

createStore returns another function that is called with a key at the top level of the store. This provides a hook function that is called without arguments.

Installation

  1. Install NPM package

    npm install react-persist-store
  2. Set up your Store and create your hook

    import createStore from "react-persist-store";
    
    // Types will be inferred from defaultStoreValues
    const defaultStoreValues = {
      // Here user is a namespace to a particular Document store
      user: {
        firstName: "",
        lastName: "",
        badges: [], // In TypeScript this is never[], you can change this behaviour with createStore<YourStoreType>(...)
      },
      posts: [
        /** ... */
      ],
    };
    
    // You can pass options to customise the type of storage, "local", "session", or false to disable persistence
    // The namespace is prepended to keys in browser storage to separate them from other state
    // const store = createStore(defaultStoreValues, { storage: 'session', namespace: 'custom' });
    const store = createStore(defaultStoreValues);
    
    export const useUser = store("user")
  3. Use the hook anywhere in your application

    import { useUser } from "./store"
    
    const Component = () => {
    // Hooks do not take arguments, and return only:
    // data - your data with types inferred from your store, or the generic you passed in
    // update - a function what takes a partial copy of data to update
    // clearAll - clear all state, including browser storage for this hook
    const { data, update, clearAll } = useUser()
    const { firstName, lastName } = data
    const fullName = `${firstName}${lastName ? ' ' + lastName : ''}`
    return (
      <p>
        {fullName}
      </p>
    )
    }
    
    export default Component

License

Distributed under the MIT License. See LICENSE for more information.

GitHub

View Github