:left_right_arrow: useHorizontalScroll

A package to easily create horizontal scrolling on flex elements.

Usate

• Install the package

  npm install @revolt-digital/use-horizontal-scroll

  yarn add @revolt-digital/use-horizontal-scroll

• Step 1, create a layout that you want to make scrolleable

<section className="flex overflow-x-hidden">
  <div className="flex-none">
    ...
  </div>
  <div className="flex-none">
    ...
  </div>
  <div className="flex-none">
    ...
  </div>
  ...
</section>

Important: Parent div must have display: flex and overflow-x: hidden | scroll css styles

• Step 2, import and assign ref to your div element.

import useHorizontalScroll from "@revolt-digital/use-horizontal-scroll";

export default () => {
  const { ref } = useHorizontalScroll();

  return (
    <section className="flex overflow-x-hidden" ref={ref}>
      <div className="flex-none">
        ...
      </div>
      <div className="flex-none">
        ...
      </div>
      <div className="flex-none">
        ...
      </div>
    </section>
  );
}

Running the example app

Run yarn install then yarn build in the root folder (the one with this README file).

Then move into the example folder cd example and run yarn install and yarn start.

Then go to http://localhost:3000