@algolia/ui-components-react-horizontal-slider v1.0.0-experimental.0

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

Horizontal slider UI component for React.

Installation

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

Usage

Standalone

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

import '@algolia/ui-components-react-horizontal-slider/HorizontalSlider.css';

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

function App() {
  // ...

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

With recommendations

See usage for Recommendations.

Props

items

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

The items to display in the component.

itemComponent

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

The item component to display.

translations

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

The translations for the component.

classNames

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

The class names for the component.