Liveblocks uses the concept of rooms, separate virtual spaces where people can collaborate. To create a real-time experience, multiple users must be connected to the same room.
Remember how we exported RoomProvider
from liveblocks.config.ts
? This
is the component we’ll be using to connect to a room, and it also enables us to
use the Liveblocks React hooks. RoomProvider
has two required properties:
id
- The unique name of the room, a string.initialPresence
- We’ll learn about this on the next page.Switch to App.tsx
and return a RoomProvider
component with the
roomId
string, and an empty object as the initialPresence
.
return ( <RoomProvider id={roomId} initialPresence={{}}> <Room /> </RoomProvider>);
We’ll be building our custom real-time app inside Room.tsx
, so we’re adding
this component as a child.
Because we’re exporting the suspense version of our hooks, we can easily add a
loading screen using ClientSideSuspense
from @liveblocks/react
. To do
this, pass <Room>
, and include a loading fallback
:
return ( <RoomProvider id={roomId} initialPresence={{}}> <ClientSideSuspense fallback={<div>Loading…</div>}> {() => <Room />} </ClientSideSuspense> </RoomProvider>);
If you’re using a framework without server-side rendering, using Suspense
from
React works too.
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.