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.