Custom components step by step
Learn how to replace components to make Cord your own
Welcome to replacements
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.
Adding a status indicator to 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.
Show a different 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.
Changing the Composer's layout
The 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.
Transform 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.
Customize Cord OptionsMenu
Our options menu already includes multiple features and actions. You might want to include some functionality specific to your product.
You can replace the Cord OptionsMenu with your own. This way, you can add new features or change the existing ones. You can also replace Menu or MenuItem inside a specific component 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