@y-presence/client

Add presence (live cursors/avatars) to any web application.

Codesandbox demo/examples

$3

- Simple room: Demo | Code

$3

- Multiplayer avatars: Demo | Code
- Simple room: Demo | Code

$3

- tldraw: Demo | Code


Installation

``bash
yarn add @y-presence/client


or


npm i @y-presence/client
`

Usage

This library exposes a Room object which wraps the provider's awareness to provide helper methods to listen to changes in self presence, other users' presence and all users' presence.

`ts
// Define your presence object here
interface AppPresence {
name: string
color: string
}

// Define your initial app presence
const initialPresence: AppPresence = { name: 'John Doe', color: 'Blue' }

const room = new Room(provider.awareness, initialPresence)

// listen to changes in all users' presence
room.subscribe('users', (users) => {
// do something
})

// listen to changes in other users' presence
room.subscribe('others', (others) => {
// do something
})

// listen to changes in self presence
room.subscribe('self', (user) => {
// do something
})

// Updates only the color of the current user's presence object
room.updatePresence({ color: 'Red' })

// Overrides the entire presence objecct of the current user in a single transaction
room.setPresence({ name: 'Jane Doe', color: 'red' })
``

$3

This project is licensed under MIT.

Author

- @nayajunimesh