npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

kea-localstorage

v3.1.0

Published

Store reducer state in localStorage with Kea

Downloads

32,339

Readme

NPM Version

Perstist Kea reducers in localstorage

  • kea-localstorage 1.1 works with kea 2.4+
  • kea-localstorage 1.0 works with kea 1.0+
  • kea-localstorage 0.1 works with kea 0.27+

Read the documentation for Kea

Installation

Install via yarn or npm

yarn add kea-localstorage
npm install --save kea-localstorage

Then add it to the context:

import { localStoragePlugin } from 'kea-localstorage'
import { resetContext } from 'kea'

resetContext({
  plugins: [ localStoragePlugin ]
})

Usage

To use it, make sure your logic store has a defined path. Then just pass { persist: true } as an option to your reducer, like so:

const someLogic = kea({
  path: () => ['scenes', 'something', 'foobar'], // NEEDED!

  actions: () => ({
    change: value => ({ value })
  }),

  reducers: ({ actions }) => ({
    persistedValue: [0, PropTypes.number, { persist: true }, {
      [actions.change]: (_, payload) => payload.value
    }]
  })
})

Options

You may optionally configure the plugin by passing in some options:

import { localStoragePlugin } from 'kea-localstorage'
import { resetContext } from 'kea'

resetContext({
  plugins: [
    localStoragePlugin({
      // in case you want to replace this, e.g. for tests or non browser environments
      storageEngine: window.localStorage,

      // added before all paths in localStorage's keys
      prefix: 'example',

      // to change the symbol that concats path parts
      separator: '_'
    })
  ]
})

With the above configuration all persisted reducers will now be save in the path: example_scenes_something_foobar

To use a different prefix/separator locally for specific reducers

const someLogic = kea([
  path(['scenes', 'something', 'foobar']),

  reducers({
    persistedValue: [0, { persist: true, prefix: 'example', separator: '_' }, {
      changeThing: (_, payload) => payload.value
    }]
  }),
])

Now the persistedValue will not be saved in scenes.something.foobar, but in example_scenes_something_foobar

Get the original default of the reducer

Under the hood kea-localstorage overrides the defaults value for your reducer with whatever was stored in localstorage. In case you need to access the original default, it's stored here:

logic.cache.localStorageDefaults['reducerKey']

storageKey

Pass a storageKey, to override the key used for storage. This allows multiple logics to share the same value. For example to have all keyed logics store a reducer globally.

const someLogic = kea([
  key(props => props.key), // not used for localstorage, overridden by storageKey
  reducers(({ actions }) => ({
    persistedValue: [0, { persist: true, storageKey: 'my.global.key' }, {
      [actions.change]: (_, payload) => payload.value
    }]
  }))
])