React Horizontal Scroller

Motivation

This is a component to visualize content in an horizontal maner like a carousel. Scroll would be scrolled using the mouse instead of the mouse wheel. That would lead to a similar behaviour on mobile and desktop devices. By default after scroll has ended (mouse or touch event is up) then it will snap the current page to the view. This behaviour can be disabled if wanted.

Code

import { ReactHorizontalScroller } from '../src/react-horizontal-scroller';
// In your render...
<ReactHorizontalScroller>
  <div className="first-div">
    First Div
  </div>
  <div className="second-div">
    Second Div
  </div>
  <div className="third-div">
    Third Div
  </div>
</ReactHorizontalScroller>

If you want to disabled snap to page feature just do add snapToPage={false} property to ReactHorizontalScroller

Install

• Npm: npm install --save react-horizontal-scroller

Demo

Try the Demo Locally

git clone https://github.com/dioxmio/react-horizontal-scroller.git
cd react-horizontal-scroller
yarn install
cd example
webpack
open index.html in any browser

API

Exports:

• ReactHorizontalScroller

Contribution

Any help is always welcome. If an issue is found please report it via github and feel free to open a PR and work on it :) If you don't have to work on it anybody is welcome in helping.