UI Customization Guide
In this guide, we will discuss the customization possibilities with the ReactiveSearch UI libraries.
Take this 2 mins interactive quiz to get a UI library recommendation based on your use-case
Theming
Themes are useful to customize the default styles for a UI library. You can also use the themePreset as dark to enable the dark mode.
You can visit the following links to find the detailed guide to theme your library.
Styling
To customize the CSS for components, you can use the className prop along with the innerClass prop. The className property applies the class to the root component and innerClass property is useful to customize the styles for the sub-components.
Follow the docs for your library.
How do you bring your design system?
If you're already using a design system and want to change the complete look and feel of the components, then customizing the CSS could be cumbersome. For example, If you're using ant-design components and want to replace the CheckList component in MultiList to the CheckList component from ant-design.
Depending on the level of customization you want, you can opt for any of the techniques mentioned below:
UI Customization for Sub-components
To customize the UI for sub-components we provide renderX props or slots specific to the sub-component. For example, to change the UI for list options in the MultiList component we can use the renderItem method like below.
UI Customization for Component
The render prop/slot in components gives you the full control over the render logic of a component. The following example uses the ant-design components to render the results and filter options.
UI and Functionality Customization
If you have a use-case where you want to customize the component's query along with the UI then we have a generic component in libraries to serve the purpose.
Learn more about it by following the below links:
