deku-stateful

Keep states in a Deku component

Usage no npm install needed!

<script type="module">
  import dekuStateful from 'https://cdn.skypack.dev/deku-stateful';
</script>

README

deku-stateful

Keep state in Deku components

Deku v2 has no states in components. This is a higher-order component that adds state and setState to the model. See this conversation here.

Compatible with Deku 2.0.0 (tested with 2.0.0-rc11) and Decca 2.0.0.

Status

import stateful from 'deku-stateful'

function initialState () {
  return { clicked: 0 }
}

function render ({ getState, setState }) {
  return <div>
    Clicked { getState().clicked } times.
    <button onClick={ () => setState({ clicked: getState().clicked + 1 }) }>
      Click me
    </button>
  </div>
}

export default stateful({ initialState, render })

Example

API

render, onCreate, onUpdate, onRemove

The render function and the lifecycle hooks will also be passed getState and setState.

function render({ getState, setState }) {
}
  • setState(object) — Updates the state when called. When setState is ran, it will queue up changes and dispatch an event like dispatch({ type: 'UI_STATE_CHANGE' }). This is meant to be picked up by your Redux store, which we're assuming will retrigger a render() when called.
  • getState() — Returns the current state.
  • state — The current state; it's preferred to use getState() instead, but it's here for legacy compatibility.

initialState

Your component can have an initialState function. Return the first state here.

function initialState ({ props }) {
  return { clicked: false }
}

export default stateful({ initialState, render })

Thanks

deku-stateful © 2016+, Rico Sta. Cruz. Released under the MIT License.
Authored and maintained by Rico Sta. Cruz with help from contributors (list).

ricostacruz.com  ·  GitHub @rstacruz  ·  Twitter @rstacruz