Instantsearch-color-refinement-list-react NPM

ColorRefinementList Widget

Demo

Demo of ColorRefinementList Widget

Description

This is the ColorRefinementList Labs widget for React InstantSearch. You can use this widget to refine results by color tags with Algolia.

This widget displays the colors of the formated facet. The facet value should have a title and hex code separated by a ';' (Eg. black;#000)

This helps the user quickly visualise the kind of color that you have in your index. This is a great widget to refine records within multiple shades of a single color (like choosing the color of a jean).

Table of Contents

Get the code

This widget comes with JavaScript but also pre-defined CSS.

JavaScript

You can copy and paste the JavaScript code from the repository itself, grab it in the src/lib folder and use the <ColorRefinementList /> component.

CSS

You can copy and paste the necessary CSS code from the repository itself, grab it in src/lib/ColorRefinementList.css.

Usage

Install it with yarn add instantsearch-color-refinement-list-react then, use it as simply as:

import { InstantSearch, Panel } from 'react-instantsearch-dom';
import ColorRefinementList from 'instantsearch-color-refinement-list-react';

<InstantSearch
    appId="..."
    apiKey="..."
    indexName="..."
>
    <Panel header="...">
        <ColorRefinementList
            attribute="..."
        />
    </Panel>
</InstantSearch>

Requirements

You should encapsulate the <ColorRefinementList/> component inside a <Panel/> and in an <InstantSearch/> one.

To work properly, you'll need to specify the record attribute corresponding to the color:

Props

Name	Type	Use
attribute (required)	string	Name of the attribute that contains the color
limit	number	Number of colors to display
showMore	boolean	Display show more button

Please note that the records' color attributes need to be formatted like grey;#eaeaea (color name and hexadecimal color separated by a semicolon) for the widget to work.