Quickstart with the React SDK

Install

npm install --save @airstate/client @airstate/react
pnpm add @airstate/client @airstate/react
yarn add @airstate/client @airstate/react
bun add @airstate/client @airstate/react

We highly recommend using pnpm.

Configure

Get your appKey from console.airstate.dev

import { configure } from '@airstate/client';

// Call this before you start using the hooks
// (it's safe to call outside react components)

configure({
    appKey: '[your app key]',
});

If you want to connect to a self-hosted opensource version of our AirState server, please consult the docs on self-hosting

The real-time hello world using useSharedState

// assume current page url: example.com/tomato

import {useSharedState} from '@airstate/react';

export function App() {
    // every client on example.com/tomato will see the
    // save value in `state`
    const [state, setState] = useSharedState<boolean>(false);

    const toggle = () => {
        setState((prev) => !prev);
    };

    return (
        <button onClick={toggle}>
            {state ? 'ON' : 'OFF'} - Click to Toggle
        </button>
    );
}

useSharedState is a drop-in replacement for React's useState.

Every client at the same URL path will see the same data, and can update this data for it to be synced in real-time to all clients.

Next Steps

You could either explore useSharedPresence to build experiences where everyone needs to see everyone's data but they should only be able to edit their own data.