React state for real-time apps.

Visly State works with React & Node.js, whether you use JavaScript or TypeScript.

Install it using npm:

npm install @visly/state

or yarn:

yarn add @visly/state

This example shows how we can store global application state, read & display it in our UI, and finally how to update the state. The component will automatically re-render when the count changes as it is subscribed to it by calling useValue.

import { state, useValue, useMutation } from '@visly/state'

const appState = state({ count: 0 })

function Component() {
    const count = useValue(appState, s => s.count)
    const increment = useMutation(appState, s => s.count++)

    return (
        <div>
            <span>{count}</span>
            <button onClick={increment}>increment</button>
        </div>
    )
}

For more detailed usage see the documentation.