Custom renderers for PubNub Chat Components for React
Migrate to Chat SDK
PubNub will stop supporting Chat Components on January 1, 2025 but you are welcome to contribute. Learn how to migrate to the Chat SDK here.
In some applications, using one of the themes and customizing it with CSS variables might not be enough. You may need to completely change the HTML markup of the components, either to modify the layout or add new, custom features.
If that's your case, you can use the most advanced and the most flexible option of customization - custom renderers. Most of the components come with one or multiple properties with names ending in renderer, like messageRenderer in the MessageList component.
These types of properties accept a function that should return a(n) HTML/JSX structure. Input for the function differs depending on a particular renderer, but it's always the data used internally to create the default markup.
Sample usage
The code snippet below shows a sample usage of messageRenderer in the MessageList component that was mentioned earlier. We are using it to replace the default markup of each message. The function is fed with a message object (message itself, attachments, and reactions) along with:
- Sender data (assuming it was either attached to the message or passed into Chat Provider)
- Time when the message was sent
- Edited text (if editing ever occured)
Default features
If needed, the default features, like message reactions and rendered attachments, might need to be implemented as well. Otherwise, they won't be shown at all.
function ExampleChat() {
const currentChannel = "example";
const renderMessage = (props: MessageRendererProps) => {
return (
<div>
<p>
<strong>{props.user.name}</strong> {props.time}
</p>
<p>{props.message.message.text}</p>
</div>
);
};
return (