LocalStorage For State Management

#react

Check out my project on Github

Sample Todo App made with this package: TodoList with LSFR

localState for React

Get Advance of LocalStorage which using by all modern browsers.

The localStorage and sessionStorage properties allow to save key/value pairs in a web browser.
The localStorage object stores data with no expiration date. The data will not be deleted when the browser is closed, and will be available the next day, week, or year.

localStorage for State Management

Install

npm install  local-state-for-react

yarn add  local-state-for-react

Methods

Determining Default State

freshState(initial)

Initializes state with default values.
This function needs to be called outside of component function.

freshState({ input1: 1 })

Writing To State

writeState(path,value)

Writes state value on given path

Getting Data From State

readState(path)

Returns state value

readState('stateName').someCustomProperty

Listening For Changes

System uses event dispatchers and React reducers for manually forcing re-rendering component which uses that state value.

So every component needs to useSubscribe method.
This method also returns single or multiple objects with, their values.

useSubscribe(...fields)

Listens for changes and Returns state values

const input1 = useSubscribe('input1')

const { name, email } = useSubscribe('name', 'email')

Usage

import { writeState, freshState, useSubscribe } from 'local-state-for-react'
freshState({ input1: 1 })
const App = () => {
  const input1 = useSubscribe('input1')
  return (
    <div>
      <h2>Hi From Local-State Package!</h2>
      <h1>{input1}</h1>
      <button
        onClick={() => {
          writeState('input1', input1 + 1)
        }}
      >
        Click To Change State!
      </button>
    </div>
  )
}

export default App