@algolia/ui-components-horizontal-slider-react

Horizontal slider UI component for React.

Installation

yarn add @algolia/ui-components-horizontal-slider-react
# or
npm install @algolia/ui-components-horizontal-slider-react

Usage

Standalone

import { HorizontalSlider } from '@algolia/ui-components-horizontal-slider-react';

import '@algolia/ui-components-horizontal-slider-theme';

const items = [
  { objectID: '1', name: 'Item 1' },
  { objectID: '2', name: 'Item 2' },
];

function Item({ item }) {
  return (
    <pre>
      <code>{item.name}</code>
    </pre>
  );
}

function App() {
  // ...

  return <HorizontalSlider itemComponent={Item} items={items} />;
}

With Algolia Recommend

See usage for Recommend.

Props

items

RecordWithObjectID | required

type RecordWithObjectID<TItem> = TItem & {
  objectID: string;
};

The items to display in the component.

itemComponent

({ item }) => JSX.Element | required

The item component to display.

translations

HorizontalSliderTranslations

type HorizontalSliderTranslations = Partial<{
  sliderLabel: string;
  previousButtonLabel: string;
  previousButtonTitle: string;
  nextButtonLabel: string;
  nextButtonTitle: string;
}>;

The translations for the component.

classNames

HorizontalSliderClassnames

type HorizontalSliderClassnames = Partial<{
  item: string;
  list: string;
  navigation: string;
  navigationNext: string;
  navigationPrevious: string;
  root: string;
}>;

The class names for the component.