RealtimeCursor

Documentation

RealtimeCursor Documentation

Getting Started

RealtimeCursor is a powerful real-time collaboration platform that allows you to add live cursor tracking, approval workflows, and GitHub-style history to your applications.

This documentation will guide you through the process of integrating RealtimeCursor into your React applications.

Installation

Install the RealtimeCursor SDK using npm or yarn:

npm install realtimecursor-sdk
# or
yarn add realtimecursor-sdk

Authentication

To use RealtimeCursor, you need to authenticate your users. The SDK provides a simple hook for authentication:

import React from 'react';
import { useRealtimeCursor } from 'realtimecursor-sdk';

function App() {
  const { 
    client, 
    user, 
    login, 
    logout, 
    isAuthenticated, 
    loading 
  } = useRealtimeCursor({
    apiUrl: 'https://your-realtimecursor-api.com',
    socketUrl: 'https://your-realtimecursor-api.com'
  });

  const handleLogin = async () => {
    try {
      await login('user@example.com', 'password');
    } catch (error) {
      console.error('Login failed:', error);
    }
  };

  return (
    

      {!isAuthenticated ? (
        
      ) : (
        

          
Welcome, {user?.fullName}

          
        

      )}
    

  );
}

Working with Projects

Once authenticated, you can work with projects using the useProject hook:

import React, { useRef } from 'react';
import { useProject } from 'realtimecursor-sdk';

function ProjectEditor({ client, projectId }) {
  const editorRef = useRef(null);
  const { 
    project, 
    content, 
    comments, 
    stagedChanges, 
    history, 
    collaborators, 
    cursors, 
    updateContent, 
    addComment,
    reviewChange
  } = useProject(client, projectId);

  const handleContentChange = (newContent) => {
    updateContent(newContent);
  };

  return (
    

      
{project?.name}