@algolia/react-instantsearch-widget-size-refinement-list
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.3 • Public • Published

    React InstantSearch

    React InstantSearch widget that filters the dataset based on size facet values.
    Equivalent of the offcial RefinementList widget but displaying size boxes as a grid instead of facet values checkboxes as a list.

    Example


    MIT NPM version

    Summary

    Get started

    Demo

    Demo on CodeSandbox.

    Installation

    npm install @algolia/react-instantsearch-widget-size-refinement-list
    # or
    yarn add @algolia/react-instantsearch-widget-size-refinement-list

    Usage

    import React from 'react';
    import ReactDOM from 'react-dom';
    import { InstantSearch, SearchBox, Hits, Panel } from 'react-instantsearch-dom';
    import algoliasearch from 'algoliasearch/lite';
    import { SizeRefinementList } from '@algolia/react-instantsearch-widget-size-refinement-list';
    
    // Import default styles
    import '@algolia/react-instantsearch-widget-size-refinement-list/dist/style.css';
    
    const searchClient = algoliasearch('appId', 'apiKey');
    
    ReactDOM.render(
      <InstantSearch indexName="indexName" searchClient={searchClient}>
        <SizeRefinementList attribute="size" />
      </InstantSearch>,
      document.getElementById('root')
    );

    Styling

    The widget ships with default styles that you can import either from the NPM package or directly from a CDN like JSDelivr.

    import '@algolia/react-instantsearch-widget-size-refinement-list/dist/style.css';
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/@algolia/react-instantsearch-widget-size-refinement-list/dist/style.css"
    />

    CSS variables

    The widget styles uses CSS variables that you can customize in your own CSS.
    You can override CSS variables using the .ais-SizeRefinementList class.

    Name Type Description
    --transition-duration time Transition duration (used for hover, active, refined states).
    --items-column-width length Items grid column width.
    --items-gap length Items grid gap.
    --refined-color-rgb integer, integer, integer The RGB values when an item is refined.
    --refined-color-alpha number The alpha value when an item is refined.
    --not-refined-rgb integer, integer, integer The RGB values when an item is not refined.
    --not-refined-alpha number The alpha value when an item is not refined.
    --border-alpha number The alpha value for the item border color when an item is not refined.

    Options

    Same options as the official RefinementList widget.

    Option Type Required Default Description
    attribute string true - The name of the attribute in the record.
    defaultRefinement string[] false [] The value of the item selected by default.
    operator string ("or"|"and") false or How to apply the refinements.
    limit number false 10 How many facet values to retrieve.
    showMore boolean false false Whether to display a button that expands the number of items.
    showMoreLimit number false 20 Maximum number of displayed items. Only used when showMore is set to true.
    searchable boolean false false Whether to add a search input to let the user search for more facet values.
    transformItems function false undefined Modifies the items being displayed, for example, to filter or sort them. It takes items as argument and expects them back in return.
    translations object false - A mapping of keys to translation values.

    attribute

    string | required

    The name of the attribute in the record.

    <SizeRefinementList attribute="size" />

    defaultRefinement

    string[]

    The value of the item selected by default.

    <SizeRefinementList defaultRefinement={['M']} />

    operator

    string ("or"|"and")

    How to apply the refinements.

    <SizeRefinementList operator="and" />

    limit

    number

    How many facet values to retrieve.

    <SizeRefinementList limit={10} />

    showMore

    boolean

    Whether to display a button that expands the number of items.

    <SizeRefinementList showMore={true} />

    showMoreLimit

    number

    Maximum number of displayed items. Only used when showMore is set to true.

    <SizeRefinementList showMoreLimit={20} />

    searchable

    boolean

    Whether to add a search input to let the user search for more facet values.

    <SizeRefinementList searchable={true} />

    transformItems

    function

    Modifies the items being displayed, for example, to filter or sort them. It takes items as argument and expects them back in return.

    <SizeRefinementList
      transformItems={(items) =>
        items.map((item) => ({
          ...item,
          label: item.label.toUpperCase(),
        }))
      }
    />

    translations

    object

    A mapping of keys to translation values.

    • showMore: the label of the “Show more” button. Accepts one boolean parameter that is true if the values are expanded, false otherwise.
    • noResults: the label of the no results text when no search for facet values results are found.
    • submitTitle: the alternative text of the submit icon.
    • resetTitle: the alternative text of the reset button icon.
    • placeholder: the label of the input placeholder.
    <LoadMoreWithProgressBar
      translations={{
        showMore(expanded: boolean) {
          return expanded ? 'Show less' : 'Show more';
        },
        noResults: 'No results',
        submitTitle: 'Submit your search query.',
        resetTitle: 'Clear your search query.',
        placeholder: 'Search here...',
      }}
    />

    Example

    Clone this repository and go to the repo folder:

    git clone git@github.com:algolia/react-instantsearch-widget-size-refinement-list.git && \
    cd react-instantsearch-widget-size-refinement-list

    Install the dependencies and start the example:

    npm install && npm start
    # or
    yarn install && yarn start

    Then open http://localhost:3000/ to see the example in action.

    Browser support

    Same as React InstantSearch it supports the last two versions of major browsers (Chrome, Edge, Firefox, Safari).

    Please refer to the browser support section in the documentation to use React InstantSearch and this widget on other browsers.

    Troubleshooting

    Encountering an issue? Before reaching out to support, we recommend heading to our FAQ where you will find answers for the most common issues and gotchas with the library.

    Contributing & Licence

    How to contribute

    We welcome all contributors, from casual to regular 💙

    • Bug report. Is something not working as expected? Send a bug report.
    • Feature request. Would you like to add something to the library? Send a feature request.
    • Documentation. Did you find a typo in the doc? Open an issue and we'll take care of it.
    • Development. If you don't know where to start, you can check the open issues that are tagged easy, the bugs or chores.

    To start contributing to code, you need to:

    1. Fork the project
    2. Clone the repository
    3. Install the dependencies: yarn
    4. Run the development mode: yarn start
    5. Open the project

    Please read our contribution process to learn more.

    Licence

    Licensed under the MIT license.


    About React InstantSearch

    React InstantSearch is a React library that lets you create an instant-search result experience using Algolia’s search API. It is part of the InstantSearch family:

    React InstantSearch | InstantSearch.js | Angular InstantSearch | Vue InstantSearch | InstantSearch Android | InstantSearch iOS

    This project was generated with create-instantsearch-app by Algolia.

    Install

    npm i @algolia/react-instantsearch-widget-size-refinement-list

    DownloadsWeekly Downloads

    63

    Version

    1.0.3

    License

    MIT

    Unpacked Size

    19 kB

    Total Files

    10

    Last publish

    Collaborators

    • fabienmotte
    • sarahdayan
    • dhaya.b
    • haroenv
    • francoischalifour
    • tkrugg