Skip to main content
React Together provides a comprehensive set of hooks for building collaborative React applications. Each hook serves a specific purpose in creating synchronized, multi-user experiences.

​
Core State Hooks

The foundation of collaborative React applications - these hooks handle shared state synchronization:

useStateTogether

Works like useState but keeps all users in sync

useStateTogetherWithPerUserValues

Shared state with individual per-user values

useFunctionTogether

Execute functions across all connected users

​
Connection & Session Hooks

Manage user connections and session state:

useIsTogether

Check if currently in a collaborative session

useIsSynchronized

Check if local state is synchronized with other users

useConnectedUsers

Get list of all connected users

useMyId

Get current user’s unique identifier

​
Session Management Hooks

Create, join, and leave collaborative sessions:

useCreateRandomSession

Create sessions with randomly generated IDs

useJoinUrl

Generate shareable URLs for session joining

useLeaveSession

Programmatically leave the current session

​
Communication Hooks

Enable real-time communication between users:

useChat

Add chat functionality to your app

useCursors

Show real-time cursor positions

useHoveringUsers

Track which users are hovering over elements

​
Utility Hooks

Helper hooks for common patterns and data access:

useNicknames

Get human-readable nicknames for users

useAllNicknames

Access nicknames of all users in session

​
Hook Categories

​
By Use Case

Primary: useStateTogether, useStateTogetherWithPerUserValues
Advanced: useFunctionTogether
Creation: useCreateRandomSession
Sharing: useJoinUrl
Leaving: useLeaveSession
Connection Status: useIsTogether, useIsSynchronized
User Information: useConnectedUsers, useMyId, useNicknames
Communication: useChat
Interaction: useCursors, useHoveringUsers

​
By Complexity Level

Start with these hooks for basic collaborative features:
  • useStateTogether - Shared state
  • useConnectedUsers - See who’s online
  • useChat - Add messaging
Add these for more sophisticated collaboration:
  • useStateTogetherWithPerUserValues - Personal preferences
  • useCursors - Show user activity
  • useJoinUrl - Session sharing
These hooks enable complex collaborative patterns:
  • useFunctionTogether - Synchronized actions
  • useHoveringUsers - Fine-grained interaction tracking
  • useIsSynchronized - Connection state management

​
Common Patterns

​
Basic Collaborative Component

import { useStateTogether, useConnectedUsers } from 'react-together'

function CollaborativeCounter() {
  const [count, setCount] = useStateTogether('counter', 0)
  const connectedUsers = useConnectedUsers()
  
  return (
    <div>
      <h1>Count: {count}</h1>
      <button onClick={() => setCount(count + 1)}>
        Increment
      </button>
      <p>{connectedUsers.length} users connected</p>
    </div>
  )
}

​
Session Management

import { useCreateRandomSession, useJoinUrl, useLeaveSession } from 'react-together'

function SessionControls() {
  const createSession = useCreateRandomSession()
  const joinUrl = useJoinUrl()
  const leaveSession = useLeaveSession()
  
  return (
    <div>
      <button onClick={() => createSession()}>
        Create New Session
      </button>
      {joinUrl && (
        <div>
          <p>Share this URL:</p>
          <code>{joinUrl}</code>
        </div>
      )}
      <button onClick={() => leaveSession()}>
        Leave Session
      </button>
    </div>
  )
}

​
User Awareness

import { useConnectedUsers, useNicknames, useCursors } from 'react-together'

function UserAwareness() {
  const connectedUsers = useConnectedUsers()
  const nicknames = useNicknames()
  const cursors = useCursors()
  
  return (
    <div>
      <h3>Connected Users:</h3>
      {connectedUsers.map(user => (
        <div key={user.userId}>
          {nicknames[user.userId] || 'Anonymous'}
        </div>
      ))}
      
      {/* Render cursors */}
      {cursors.map(cursor => (
        <div
          key={cursor.userId}
          style={{
            position: 'absolute',
            left: cursor.x,
            top: cursor.y,
            pointerEvents: 'none'
          }}
        >
          👆 {nicknames[cursor.userId]}
        </div>
      ))}
    </div>
  )
}

​
Next Steps

Getting Started

Set up React Together in your project

Components

Explore pre-built collaborative components

Utilities

Helper functions for common tasks

Examples

See hooks in action with complete examples
⌘I