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

react-persist-store

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

Install NPM package
```
npm install react-persist-store
```

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")

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