Skip to main content
Version: Next

Kabelwerk Room

The <KabelwerkRoom> component renders a chat room.

Example

<KabelwerkRoom
roomId={42}
renderMessage={(message, theirMarker) => (
<KabelwerkMessage message={message} theirMarker={theirMarker} />
)}
renderMessageSeparator={(date) => <KabelwerkMessageSeparator text={date} />}
renderMessageForm={(postMessage, postUpload) => (
<KabelwerkMessageForm postMessage={postMessage} postUpload={postUpload} />
)}
renderWelcomeBanner={() => <Text>Send us a message!</Text>}
onReady={(room) => room.updateAttributes({ lastOpened: new Date() })}
/>

Props

roomId

The ID of the room to render. If this prop is not set, a random room belonging to the connected user will be rendered — which is useful when you have a single hub.

renderMessage

The function used to render the chat messages in the room. The default is to render a <KabelwerkMessage> component.

renderMessageSeparator

The function used to render the separators between messages posted on different dates. The function is invoked with a date string in the YYYY-MM-DD format. The default is to render a <KabelwerkMessageSeparator> component with the given date string (surrounded by em dashes).

renderMessageForm

The function used to render the form for posting new messages. The default is to render a <KabelwerkMessageForm> component.

renderWelcomeBanner

Called to render a welcome banner when the user has neither posted nor received any messages in the chat room yet. The default is not to render anything.

onReady

Called when the connection to the backend for this room is first established. Called with the respective room object. You can use this to update the room's custom attributes. The default is a no-op.

See also