useScrollable

This is an experimental component

This component is shipped in our NPM package, but its API might change based on user feedback.

useScrollable gives possibility to create slider scrollable with e.g thumbnails.

With useScrollable, you don't need to worry about handling previous or next methods which scroll through scrollable.

Usage

Base Usage

To use useScrollable attach containerRef to the main container to identify the element that will watch for specific events. Additionally, create two buttons for showing next nad previous elements and apply getPrevButtonProps and getNextButtonProps to each button accordingly.

import * as React from 'react';
import { useScrollable } from '@storefront-ui/react';

function BasicScrollable(props: Props) {
  const { containerRef, state, getNextButtonProps, getPrevButtonProps } = useScrollable();

  return (
    <div className="flex items-center">
      <button {...getPrevButtonProps()}>previous</button>
      <div ref={containerRef}>
        {Array.from({ length: itemsLength }, (_, i) => (
          <div
            key={i}
          >
            thumbnail {i + 1}
          </div>
        ))}
      </div>
      <button {...getNextButtonProps()}>next</button>
    </div>
  );
}

Controlled showing next and previous elements

useScrollable exposes imperative methods for showing elements - showNextandshowPrev. To make them work, user needs to bind these functions as onClick` handler.

import * as React from 'react';
import { useScrollable } from '@storefront-ui/react';

function BasicScrollable(props: Props) {
  const { containerRef, state, showNext, showPrev } = useScrollable();

  return (
    <div className="flex items-center">
      <button onClick={showPrev()} disabled={!state.hasPrev}>previous</button>
      <div ref={containerRef}>
        {Array.from({ length: itemsLength }, (_, i) => (
          <div
            key={i}
          >
            thumbnail {i + 1}
          </div>
        ))}
      </div>
      <button onClick={showNext()} disabled={!state.hasNext}>next</button>
    </div>
  );
}