Learn how to replace components to make Cord your own
Cord's Replacements API is the key to customizing your app beyond CSS tweaks. Today, we'll learn how to give our app the look of GitHub. Let's jump right in.
Avatar
The Avatar
component shows the user's profile picture. We want to show the user's status indicator on top of their picture.
We can replace the default cord Avatar
with our own component that renders the default Cord Avatar
and the status badge as a sibling.
Replacing a component with itself and something more is a common use case.
SendButton
If the default SendButton
(shown in the composer) doesn't fit your design, you can replace it with your own.
Even as we completely replace the component used, it's important to understand that we retain access to the original props. This enables us to conveniently reuse them, making the replacement a smooth experience.
Composer
's layoutThe Composer
is where you write your messages. Replacing theSendButton
already made some changes to it, but if you want to make more complex changes, you can replace ComposerLayout
and shuffle elements around or extend the functionality.
Through their props, our layout components receive the elements they need to show. You can move them around and add some styles.
Message
A Message
is a collection of messages with a composer. You can change how each of the messages looks like by replacing the Message
component.
OptionsMenu
Our options menu already includes multiple features and actions. You might want to include some functionality specific to your product.
You can modify the Cord OptionsMenu
to change the look of the MenuButton
and also add new features or change the existing MenuItem
s. For this, you need to replace MenuItem
and MenuButton
inside a specific component (OptionsMenu
) with the within
option in the ReplaceConfig
.
In these steps, we've learned how to use Cord's Replacements API to customize the appearance of your application's components and enhance their functionality.
For further details on which components can be replaced and what props they accept, refer to our Components page, or explore more about replacements in our API documentation. If you have any remaining questions, feel free to ask within our Cord Community.
Not finding the answer you need? Ask our Developer Community