Getting started—React tutorial

Joining a room

Liveblocks uses the concept of rooms, separate virtual spaces where people can collaborate. To create a realtime experience, multiple users must be connected to the same room.

RoomProvider

RoomProvider is the component we’ll be using to connect to a room, and it requires an id prop, which represents the unique name of the room. Switch to App.tsx and return a RoomProvider component with the roomId string.

return (  <LiveblocksProvider publicApiKey={publicApiKey}>    <RoomProvider id={roomId}>      <Room />    </RoomProvider>  </LiveblocksProvider>);

We’ll be building our custom realtime app inside Room.tsx, so we’re passing this component as a child.

Suspense and loading screens

We recommend using Suspense when building with Liveblocks, as it makes it simpler to use our hooks. This also makes it easy to display a loading screen around components by using ClientSideSuspense from the @liveblocks/react package. To do this, pass <Room> as a child, and include a loading fallback:

return (  <LiveblocksProvider publicApiKey={publicApiKey}>    <RoomProvider id={roomId}>      <ClientSideSuspense fallback={<div>Loading…</div>}>        <Room />      </ClientSideSuspense>    </RoomProvider>  </LiveblocksProvider>);

You can place this component anywhere inside your app, for example around an avatar stack—it doesn’t have to sit at the top-level. Add the code and click refresh in the preview window to see a brief loading message.