The card view feature is a UI component designed to enhance chat interfaces by organizing messages into cards. In UI design, a 'card' is a rectangular box that contains and displays a piece of related information cohesively, like a single chat message or a group of messages. This layout not only makes information presentation cleaner and more structured but also allows for greater user engagement and improved aesthetics. The cards are customizable, supporting integration of images, text, and interactive elements, and can be easily adapted to match your brand's style. This page guides you to render custom message views such as a card view, in React applications using Sendbird UIKit for Chat.
Sendbird Chat SDK 4.10.1
Sendbird Chat UIKit for React 3.71
Components supporting renderMessage prop
You can pass the
renderMessage prop to the following components from @sendbird/uikit-react` for rendering custom message views.
|List of components
Implement the card view UI
To implement a custom message view, such as a card view, you need to define a custom channel component first. Then, define a
CardViewMessage component to specify the layout and style of your custom card view message.
Check for card view message
You can determine if a message is of the card view type by creating a utility function as shown below.