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.
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.