thistate 🌎

Thistate is a custom React hook that can manage states globally in the application.

Documentation

To use thistate follow the documentation to the some methods.

Thistate.useState

Returns a statefull value and function to update it.

function useState(initializer)

initializer - Is a key or an observable state.

Thistate.create

Create an state entry on the store.

function create({ key, defaultValue })

key: string - Is the key of the state.
defaultValue: any - Is the initial value of the state.

---

How to use

To use thistate is really simple, just use 2 functions, create and useState (from thistate import both).

First you should create a new state, for example:

const myStateListener = create({
  key: 'myState',
  defaultValue: 'myInitialValue'
})

Once created you can use the state anywhere in the application passing the state key. For example:

const [user, setUser] = useState('myState')

Or a StateListener returned from the create function.

const [user, setUser] = useState(myStateListener)

Code examples

Take this simple example.

import * as Thistate from 'thistate'

const nameState = Thistate.create({
  key: 'name',
  defaultValue: ''
})

function App() {
  return <>
    <Display listen={nameState} />
    <Input key='name' />
  </>
}

function Input({ key }) {
  const [value, setValue] = Thistate.useState(key)
  return <input onChange={evt => setValue(evt.target.value)} value={value} />
}

function Display({ listen }) {
  const [value] = Thistate.useState(listen)
  return <h2>{value}</h2>
}

See the example above live in CodeSandbox: https://codesandbox.io/s/thistate-simple-example-23uns