mirror of
https://github.com/supabase/supabase.git
synced 2026-05-10 10:50:18 -04:00
Jordi Enric
fc3a87ca39
* add throttled callback to cursor hook * Simplify some parts, add a different kind of throttle. * Fix the transition duration. * Update the realtime cursor blocks. * add docs for smoother cursors --------- Co-authored-by: Ivan Vasilov <vasilov.ivan@gmail.com>
65 lines
2.6 KiB
Plaintext
65 lines
2.6 KiB
Plaintext
---
|
|
title: Realtime Cursor
|
|
description: Real-time cursor sharing for collaborative applications
|
|
---
|
|
|
|
<div className="flex flex-row -space-x-px w-full">
|
|
<BlockPreview name="realtime-cursor-demo" isPair />
|
|
<BlockPreview name="realtime-cursor-demo" isPair />
|
|
</div>
|
|
|
|
## Installation
|
|
|
|
<BlockItem
|
|
name="realtime-cursor-react"
|
|
description="Renders realtime cursors from other users in a room."
|
|
/>
|
|
|
|
## Folder structure
|
|
|
|
<RegistryBlock itemName="realtime-cursor-react" />
|
|
|
|
## Introduction
|
|
|
|
The Realtime Cursors component lets users share their cursor position with others in the same room—perfect for real-time collaboration. It handles all the setup and boilerplate for you, so you can add it to your app with minimal effort.
|
|
|
|
**Features**
|
|
|
|
- Broadcast cursor position to other users in the same room
|
|
- Customizable cursor appearance
|
|
- Presence detection (automatically joins/leaves users)
|
|
- Low-latency updates using Supabase Realtime
|
|
- Room-based isolation for scoped collaboration
|
|
|
|
## Usage
|
|
|
|
The Realtime Cursor component is designed to be used in a room. It can be used to build real-time collaborative applications. Add the `<RealtimeCursors />` component to your page and it will render realtime cursors from other users in the room.
|
|
|
|
```tsx
|
|
import { RealtimeCursors } from '@/components/realtime-cursors'
|
|
|
|
export default function Page() {
|
|
return (
|
|
<div className="w-full min-h-screen">
|
|
<RealtimeCursors roomName="macrodata_refinement_office" username="Mark Scout" />
|
|
</div>
|
|
)
|
|
}
|
|
```
|
|
|
|
## Props
|
|
|
|
| Prop | Type | Description |
|
|
| ---------- | -------- | ---------------------------------------------------------- |
|
|
| `roomName` | `string` | Unique identifier for the shared room or session. |
|
|
| `username` | `string` | Name of the current user; used to track and label cursors. |
|
|
|
|
## Further reading
|
|
|
|
- [Realtime Broadcast](https://supabase.com/docs/guides/realtime/broadcast)
|
|
- [Realtime authorization](https://supabase.com/docs/guides/realtime/authorization)
|
|
|
|
### Smoother cursors
|
|
|
|
While our Realtime Cursor component aims to keep things simple and lightweight, you may want to add smoother cursor animations for a more polished experience. Libraries like [perfect-cursors](https://github.com/steveruizok/perfect-cursors) can be integrated to add sophisticated interpolation between cursor positions. This is especially useful when dealing with network latency, as it creates fluid cursor movements even when position updates are received at longer intervals (e.g., every 50-80ms). The library handles the complex math of creating natural-looking cursor paths while maintaining performance.
|