Non-Printable Material

    @y-presence/client
    TypeScript icon, indicating that this package has built-in type declarations

    2.0.1 • Public • Published

    @y-presence/client

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

    Codesandbox demo/examples

    Vue.js

    Svelte

    Other examples/integrations:

    Edit y-presence

    Installation

    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.

    // 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<AppPresence>(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' })

    License

    This project is licensed under MIT.

    Author

    Install

    npm i @y-presence/client

    DownloadsWeekly Downloads

    432

    Version

    2.0.1

    License

    MIT

    Unpacked Size

    12 kB

    Total Files

    6

    Last publish

    Collaborators

    • nimeshnayaju