---
source_url: https://www.pubnub.com/docs/chat/components/react/ui-theming/custom-renderers
title: Custom renderers for PubNub Chat Components for React
updated_at: 2026-06-23T11:41:53.960Z
---

> Documentation Index
> For a curated overview of PubNub documentation, see: https://www.pubnub.com/docs/llms.txt
> For the full list of all documentation pages, see: https://www.pubnub.com/docs/llms-full.txt


# Custom renderers for PubNub Chat Components for React

:::warning Migrate to Chat SDK
PubNub will stop supporting Chat Components on January 1, 2025 but you are [welcome to contribute](https://github.com/pubnub/react-chat-components). Learn how to migrate to the Chat SDK [here](https://www.pubnub.com/docs/general/resources/migration-guides/react-components-chat-sdk).
:::

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)

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

```tsx
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 (
    <Chat currentChannel={currentChannel}>
      <MessageList fetchMessages={10} messageRenderer={renderMessage} />
    </Chat>
  );
}

export default ExampleChat;
```