Local-state-for-react NPM

local-state-for-react

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