@roomful/react

React bindings for Roomful — a provider plus idiomatic hooks for real-time presence, cursors, shared state, awareness, events, viewport sync, laser pointer, locks, comments, and history.

Stable — v1.5. Realtime presence, cursors, and shared state, plus the collaboration primitives (useViewport, useLocks, usePointer, useComments, useHistory). The API is stable and ready for production.

Install

npm install @roomful/core @roomful/react

Usage

import { RoomfulProvider, usePresence, useSharedState } from '@roomful/react';

function App() {
  return (
    <RoomfulProvider roomId="my-room" presence={{ name: 'Alice' }}>
      <Room />
    </RoomfulProvider>
  );
}

function Room() {
  const { others } = usePresence();
  const [count, setCount] = useSharedState('count', { initialValue: 0 });
  return (
    <button onClick={() => setCount(count + 1)}>
      {count} · {others.length} others here
    </button>
  );
}

Hooks: useRoom, usePresence, useCursors, useSharedState, useAwareness, useEvent, usePeers, useConnectionStatus. v1.5 collaboration primitives: useViewport, useLocks (plus useLockState), usePointer, useComments, useHistory — see the reference docs.

Documentation

See the Roomful repository for the full API reference.

License

MIT