Skip to content

vislyhq/visly-state

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Feb 4, 2021
c4c1710 · Feb 4, 2021
Sep 17, 2020
Sep 18, 2020
Sep 18, 2020
Feb 4, 2021
Sep 21, 2020
Sep 17, 2020
Sep 14, 2020
Sep 17, 2020
Sep 18, 2020
Sep 14, 2020
Sep 17, 2020
Sep 15, 2020
Feb 4, 2021
Sep 17, 2020
Sep 17, 2020

Repository files navigation

React state for real-time apps.

Installation

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

Creating your first 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.