aj-react-store

Global State for React Applications

Usage no npm install needed!

<script type="module">
  import ajReactStore from 'https://cdn.skypack.dev/aj-react-store';
</script>

README

aj-react-store

Easy state management for react



Installation

npm i aj-react-store

Usage

import globalState,{useSaveStore,useInitStore} from 'aj-react-store'

In App.js

Call useInitStore()


Save to Global State

useSaveStore(identifierString,value)

Eg: useSaveStore('formState',state)


Access globalState

console.log(globalState)


Example

App.js

import React, { useState } from 'react'
import globalState, { useSaveStore, useInitStore } from 'aj-react-store'

import Form from './Form'

const App = (props) => {
  useInitStore() //To Activate globalState

  // Making a simple state using useState
  const [state, setState] = useState({
    a: 'hello',
    b: ['hi', 'hello'],
    c: { ha: 'qwe', hlo: 'hehe' },
  })

  useSaveStore('state', state) //Saving state to globalState

  console.log(globalState)

  return (
    <div>
      <Form />
      {globalState.form} {/* Tom */}
    </div>
  )
}

export default App

Form.js

import React,{useState} from 'react'
import globalState, { useSaveStore } from 'aj-react-store'

const Form = (props) => {
  // Making a simple state using useState
  const [name, setName] = useState('Tom')

  useSaveStore('form', name) //Saving state to globalState

  console.log(globalState)
  // {
  //   app:{
  //       a: 'hello',
  //       b: ['hi', 'hello'],
  //       c: { ha: 'qwe', hlo: 'hehe' },
  //   },
  //   form: 'Tom'
  // }

  return (
    <div>
      {globalState.state.a} {/* hello */}
    </div>
  )
}

export default Form