realtimecursor/QUICK_START.md

Real-time collaboration system with cursor tracking and approval workflow

# Quick Start Guide

This guide will help you get started with RealtimeCursor in your React project.

## 1. Install the SDK

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

## 2. Add to Your React Component

```jsx
import React, { useState, useRef, useEffect } from 'react';
import { useRealtimeCursor, CursorOverlay } from 'realtimecursor-sdk';
import 'realtimecursor-sdk/dist/cursor.css';

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

That's it! You now have real-time cursor tracking and collaborative editing in your React app.

## Next Steps

- Check out the [full documentation](https://github.com/sourabhpunase/realtimecursor/tree/main/docs) for more features
- See the [examples](https://github.com/sourabhpunase/realtimecursor/tree/main/examples) for complete implementations
- Learn how to [self-host](https://github.com/sourabhpunase/realtimecursor/blob/main/SELF_HOSTING.md) the backend server