Liveblocks Room

Enable multiplayer with <LiveblocksRoom>, powered by Liveblocks

Quick start

It's advised you read the quick start page if you haven't already.

How to use

The room-id="" and public-key="" attributes are required. These correspond to the name of the room currently being shared by users, and your Liveblocks public key. User properties can also be set using attributes. Wrap all your multiplayer components inside <LiveblocksRoom>. One <LiveblocksRoom> per page.

---
import LiveblocksRoom from 'astro-collab/LiveblocksRoom.astro'
---
<!-- Default user settings -->
<LiveblocksRoom
  room-id="my-room"
  public-key="pk_live_xxxxxxxxxxxxxxxxxxxxxxxxx"
>
  <!-- Multiplayer components inside -->
</LiveblocksRoom>

<!-- Setting user properties by attribute -->
<LiveblocksRoom
  room-id="my-room"
  public-key="pk_live_xxxxxxxxxxxxxxxxxxxxxxxxx"
  user-name="Chris"
  user-color="#00ff00"
  user-picture="/url-of-img.png"
  user-status="In a call"
>
  <!-- Multiplayer components inside -->
</LiveblocksRoom>

Setting user properties

To set the current user's properties (name, color etc.), use the window.LiveblocksRoom.setUser method. These properties will be used within multiplayer components.

<script>
  // All user properties changed
  window.LiveblocksRoom.setUser({
    name: 'Chris',
    color: 'red',
    status: 'Available',
    picture: '/avatars/4.png'
  })

  // Only 'name' will change. Other properties stay the same.
  window.LiveblocksRoom.setUser({
    name: 'Rachel'
  })

  // Remove 'picture'. Other properties stay the same.
  window.LiveblocksRoom.setUser({
    picture: null
  })
</script>

Properties can also be set using LiveUserForm

Set room

You can change the current room using window.LiveblocksRoom.setRoom. This function accepts a string.

<script>
  window.LiveblocksRoom.setRoom('my-new-room-name')
</script>

Components

@ctnicholasdev