@bhoomash/syncraft-react

React 18 concurrent rendering bindings and hooks for Syncraft collaborative applications.

Installation

npm install @bhoomash/syncraft-react @bhoomash/syncraft-client @bhoomash/syncraft-core

Features

• ⚛️ React 18 Concurrent Rendering: Built natively with useSyncExternalStore for tearing-free state subscriptions.
• 🎯 Fine-Grained Slices: useSyncState(store, 'path.to.prop') only re-renders components when that specific subtree changes.
• 🌐 Connection State Awareness: useConnectionStatus(client) exposes live online/offline/reconnecting status.
• 🧩 Context Provider: SyncProvider and useSyncClient() simplify component composition.

Quick Start

import React from 'react';
import { createSyncClient } from '@bhoomash/syncraft-client';
import { SyncProvider, useSyncState, useConnectionStatus, useSyncClient } from '@bhoomash/syncraft-react';

const client = createSyncClient({
  url: 'ws://localhost:8080',
  roomId: 'workspace-demo',
  autoConnect: true
});

function CollaborativeTitle() {
  const client = useSyncClient();
  const [title, setTitle] = useSyncState(client.getStore(), 'document.title');
  const status = useConnectionStatus(client);

  return (
    <div>
      <p>Connection: <strong>{status}</strong></p>
      <input
        type="text"
        value={title || ''}
        onChange={(e) => setTitle(e.target.value)}
        placeholder="Type a title..."
      />
    </div>
  );
}

export function App() {
  return (
    <SyncProvider client={client}>
      <CollaborativeTitle />
    </SyncProvider>
  );
}

License

MIT © Bhoomash