realtimecursor/examples/react/README.md

Real-time collaboration system with cursor tracking and approval workflow

# How to Use RealtimeCursor in Your React Project

This guide will help you integrate RealtimeCursor into your React project in just a few minutes.

## Step 1: Install the SDK

```bash
npm install realtimecursor-sdk
```

## Step 2: Import the Components

```jsx
import { useRealtimeCursor, CursorOverlay } from 'realtimecursor-sdk';
import 'realtimecursor-sdk/dist/cursor.css';
```

## Step 3: Use the Hook in Your Component

```jsx
function MyEditor() {
  const [content, setContent] = useState('');
  const editorRef = useRef(null);
  
  // Initialize RealtimeCursor
  const { 
    cursors, 
    updateCursor, 
    updateContent,
    collaborators,
    connect,
    disconnect
  } = useRealtimeCursor({
    apiUrl: 'https://api.realtimecursor.com', // Or your self-hosted server
    projectId: 'my-project',
    user: {
      id: 'user-123',
      name: 'John Doe'
    }
  });
  
  // Connect on mount
  useEffect(() => {
    connect();
    return () => disconnect();
  }, [connect, disconnect]);
  
  // Handle mouse movement
  const handleMouseMove = (e) => {
    updateCursor({
      x: e.clientX,
      y: e.clientY
    });
  };
  
  // Handle content changes
  const handleChange = (e) => {
    const newContent = e.target.value;
    setContent(newContent);
    updateContent(newContent);
  };
  
  return (
    <div>
      <textarea
        ref={editorRef}
        value={content}
        onChange={handleChange}
        onMouseMove={handleMouseMove}
      />
      <CursorOverlay cursors={cursors} />
    </div>
  );
}
```

## Step 4: Display Collaborators (Optional)

```jsx
<div className="collaborators">
  {collaborators.map(user => (
    <div key={user.id} className="collaborator">
      <div className="avatar" style={{ backgroundColor: user.color }}>
        {user.name.charAt(0)}
      </div>
      <span>{user.name}</span>
      {user.isTyping && <span>...</span>}
    </div>
  ))}
</div>
```

## Step 5: Add Typing Indicators (Optional)

```jsx
// Set up typing indicator
let typingTimeoutRef = useRef(null);

const handleKeyDown = () => {
  setTyping(true);
  
  clearTimeout(typingTimeoutRef.current);
  typingTimeoutRef.current = setTimeout(() => {
    setTyping(false);
  }, 1000);
};

// Add to your textarea
<textarea
  onKeyDown={handleKeyDown}
  // other props
/>
```

## Complete Example

See the [examples/react](https://github.com/sourabhpunase/realtimecursor/tree/main/examples/react) directory for a complete working example.

## Self-Hosting (Optional)

If you want to self-host the backend server:

1. Clone the repository:
   ```bash
   git clone https://github.com/sourabhpunase/realtimecursor.git
   ```

2. Start the server:
   ```bash
   cd realtimecursor
   npm install
   npm start
   ```

3. Update your React app to use your self-hosted server:
   ```jsx
   useRealtimeCursor({
     apiUrl: 'http://your-server-url:3000',
     // other options
   });
   ```

## Need Help?

If you need help, please [open an issue](https://github.com/sourabhpunase/realtimecursor/issues) on GitHub.