A simple state handler with rendering functionality
JS State Handler can be installed via NPM.
npm install js-state-handler --save
You can also install JS State Handler manually. Learn more here.
Creating a basic state is simple. Just import the script in your html or import it into your module and you're ready to go.
var TodoState = new StateHandler({
items: [],
isOffline: false
})
var renderItems = function () {
// handle todo item rendering
}
TodoState.addToRenderer({
keys: ['items'],
method: renderItems
})
TodoState.render()
// Now change the state
TodoState.set({
items: TodoState.data.items.push('Do something')
})
For more informations, check the documentation.
I used a state-like approach in a project which is based on PHP and CustomElements. Instead of changing styles directly I liked a more readable approach to change states.
Since I used it in multiple components, I had to copy it over and over to the point I got annoyed and decided to extract it to it's own package.