@seanmcp/state NPM

`@seanmcp/state`

Implementing React's state management in vanilla JavaScript

this.initState({ library: 'state' })
this.setState({ author: 'seanmcp' }, () => {
    console.log(`${this.state.library} by ${this.state.author}`)
})
// -> state by seanmcp

Install

CDN

Add this tag to your head element:

<script src="https://unpkg.com/@seanmcp/state"></script>

Manual

Install the package from npm:

npm install --save @seanmcp/state

Add this tag to you head element:

<script src="./node_modules/@seanmcp/state/lib/index.js"></script>

API

Basic usage

this.initState({ greeting: 'Hello', name: 'world' })
this.state
// -> { greeting: "Hello", name: "world" }
this.setState({ greeting: 'Howdy' })
this.state
// -> { greeting: "Howdy", name: "world" }

Referencing `prevState`

this.initState({ count: 0 })
this.setState(prevState => ({ count: prevState.count++ }))
this.state.count
// -> 1

Optional callback

this.initState({ is: 'stale' })
this.setState({ is: 'fresh' }, () => console.log(this.state.is))
// -> "fresh"

Reacting to state change

Before updating the application state, this.setState() does a shallow comparison between the previous and next states. If there is a change, the state is updated, the callback is called (if present), and a custom state event is triggered on the window object.

To react to state changes, add a state event listener to window that renders based on data from state:

this.initState({ items: [] })

function addItem() {
    this.setState(prevState => {
        const items = [...prevState.items]
        items.push(new Date().getTime())
        return {
            items
        }
    })
}

function renderItems() {
    // DOM manipulation
}

window.addEventListener('state', () => {
    renderItems()
})