• Stars
    star
    134
  • Rank 270,908 (Top 6 %)
  • Language
    TypeScript
  • License
    MIT License
  • Created about 4 years ago
  • Updated over 3 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

React state for real-time apps

Visly State ยท GitHub license npm version Tests

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.