ColorRefinementList labs
This widget is an experiment and its API is subject to change without prior notice.
If you experience any issues, send a bug report. You can also contact us if you have any feedback or feature suggestion.
<ColorRefinementList attribute={string} // Optional parameters sortByColor={boolean} layout={string} shape={string} pinRefined={boolean} limit={number} showMore={boolean} showMoreLimit={number} separator={string} transformItems={function} translations={object} />
1
2
3
import {
ColorRefinementList
} from '@algolia/react-instantsearch-widget-color-refinement-list';
About this widget
We released React InstantSearch Hooks, a new InstantSearch library for React. We recommend using React InstantSearch Hooks in new projects or upgrading from React InstantSearch.
The ColorRefinementList
widget filters results based on color facet values.
The widget only displays the most relevant colors for the current search context.
Requirements
The attribute provided to the widget must be added in attributes for faceting, either on the dashboard or using attributesForFaceting
with the API.
In your records, color attributes should have a title and hexadecimal code separated by a semicolon ;
(it can be customized using the separator
option). You can also use a URL instead of the hexadecimal code if you want to display a pattern. For example:
black;#000
red;#f00
yellow;#ffff00
multicolor;https://example.com/images/rainbow_wheel.png
Styling
The widget ships with default styles that you can import either from the npm package or directly from a CDN like JSDelivr.
1
import '@algolia/react-instantsearch-widget-color-refinement-list/dist/style.css';
1
2
3
4
5
<!-- ... -->
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/@algolia/react-instantsearch-widget-color-refinement-list/dist/style.css"
/>
CSS variables
The widget styles use CSS variables that you can customize in your own CSS. You can override CSS variables from the .ais-ColorRefinementList
class.
Examples
1
2
3
4
5
6
import {
ColorRefinementList
} from '@algolia/react-instantsearch-widget-color-refinement-list';
import '@algolia/react-instantsearch-widget-color-refinement-list/dist/style.css';
<ColorRefinementList attribute="color" />
Props
attribute
|
type: string
Required
The name of the attribute that contains the color in the record. |
||
Copy
|
|||
sortByColor
|
type: boolean
default: false
Optional
Sort facet values by color distance. |
||
Copy
|
|||
layout
|
type: string ("Grid"|"List")
default: "Grid"
Optional
UI layout of the facet values. |
||
Copy
|
|||
shape
|
type: string ("Circle"|"Square")
default: "Circle"
Optional
UI color shape. |
||
Copy
|
|||
pinRefined
|
type: boolean
default: false
Optional
Pins refined items to the top when the list is expanded with |
||
Copy
|
|||
limit
|
type: number
default: 10
Optional
How many facet values to retrieve. When you enable the |
||
Copy
|
|||
showMore
|
type: boolean
default: false
Optional
Whether to display a button that expands the number of items. |
||
Copy
|
|||
showMoreLimit
|
type: number
default: 20
Optional
The maximum number of displayed items. Only used when |
||
Copy
|
|||
separator
|
type: string
default: ";"
Optional
Color facet value separator. |
||
Copy
|
|||
transformItems
|
type: function
Optional
Modifies the items being displayed, for example, to filter or sort them. It takes items as argument and expects them back in return. |
||
Copy
|
|||
translations
|
type: object
Optional
A mapping of keys to translation values.
|
||
Copy
|