Customize React components

Replacements #

Replacements enable component substitution, allowing you to inject custom components into predefined slots within our default components. Visit the step by step guide on how to use the Replacements API.

Use cases #

Changing a Component Completely #

With the Replacements API, you can redefine your components to display exactly what your application needs. For example, if your app revolves around video content, you might want a message layout that not only shows the usual text but also includes specific details like the video's timestamp. Simply create your custom VideoMessageLayout that incorporates these elements and use Replace to swap out the default layout.

Changing the Props of a Component #

Sometimes, the default components work just fine, and you might only want to tweak them a bit. For example, you want to track when users interact with any button across your application. You can simply use the Replace API to add an onClick event listener to every Button. This way, whenever a button is clicked, it not only performs its designated action but also logs the event for analytics purposes.

Inserting new components beside #

Some of our customers want to display a status emoji next to their users' avatars. The Replace API makes this easy. You can supply your version of the Avatar component, now enhanced to include a small emoji next to it, indicating the user's current status.

Usage #

To replace components with your custom ones, you have two options: using the replace prop or the Replace component.

ReplaceConfig #

Both the component and the prop accept an object of type ReplaceConfig, which takes the following properties:

Replace prop #

Each of our components is designed to accept a replace prop, of the type ReplaceConfig, as detailed earlier. Whenever you specify this replace prop within a component, we will substitute any eligible child components with your custom alternatives instead of rendering the default ones.

<Replace/> component #

Instead of swapping out components one by one, you can wrap your code in a Replace tag. This tag takes a replace prop, just like the one in the previous example, and it will make sure that any component that accepts a replace prop will automatically use the custom component you have provided.

Example #

You are putting your app together and you decide the 'Send' button in the message composer needs a different look. With our Replacements API, you can pass your custom MySendButton component to theComposer component, which will replace the default SendButton with your customized version.

export const Example = () => {
  return (
    <>
      // Replace component
      <Replace replace={{ SendButton: MySendButton }}>
          <Composer threadId={"<your_thread_id>"}/>
      </Replace>

      // Replace prop
      <Composer 
        threadId={"<your_thread_id>"}
        replace={{ SendButton: MySendButton }}
      />
    </>
  );
};

function MySendButton(props: SendButtonProps) {
  return (
      <SendButton {...props}>
          <PaperAirplaneIcon
              style={{ color: props.disabled ? 'grey' : 'white' }}
          />
      </SendButton>
  );
}

export const Example = () => {
  return (
    <>
      // Replace component
      <Replace replace={{ SendButton: MySendButton }}>
          <Composer threadId={"<your_thread_id>"}/>
      </Replace>

      // Replace prop
      <Composer 
        threadId={"<your_thread_id>"}
        replace={{ SendButton: MySendButton }}
      />
    </>
  );
};

function MySendButton(props: SendButtonProps) {
  return (
      <SendButton {...props}>
          <PaperAirplaneIcon
              style={{ color: props.disabled ? 'grey' : 'white' }}
          />
      </SendButton>
  );
}

Customizable Components #

Go to components

FAQ #