React Overflow Scroll

Built with react hooks, styled-components and lodash

• horizontal scrollbar
• lazy loading images!!
• touch support
• grabbing and clicking
• smooth scrolling
• clickable navigation dots
• universal app support
• customizable styles
• and more...

Quick start

1yarn add (or npm install) --save react-overflow-scroll

In project:

1import React from "react";
2import ReactDOM from "react-dom";
3import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
4import {
5  faChevronRight,
6  faChevronLeft
7} from "@fortawesome/free-solid-svg-icons";
8import Slider from "react-overflow-scroll";
9
10const App = () => {
11  let arrayItems = [...Array(19).keys()].map((el, index) => (
12    <div
13      style={{ height: 200, minWidth: 200, background: "#eee", margin: 8 }}
14      key={index}
15    >
16      Lorem ipsum!
17    </div>
18  ));
19  const arrowRight = <FontAwesomeIcon icon={faChevronRight} />;
20  const arrowLeft = <FontAwesomeIcon icon={faChevronLeft} />;
21
22  return (
23    <>
24      <div style={{ width: 950 }}>
25        <Slider
26          data={arrayItems}
27          arrowLeft={arrowLeft}
28          arrowRight={arrowRight}
29          withGrab={true}
30          withDots={true}
31        />
32      </div>
33    </>
34  );
35};
36
37ReactDOM.render(<App />, document.getElementById("root"));

Properties and callbacks

Props	Type	Description
data	Array components / images	Items to render in slider
sliderStyle	Object	Styles for slider
buttonStyle	Object	Styles for buttons
withArrows	Boolean	Render clickable arrows
withGrab	Boolean	Allow moving slider by grabbing items
withDots	Boolean	Render dots that shows number ofactual slide
withGrab	Boolean	Allow moving slider by grabbing items
withScale	String	Zoom in or zoom out items while slider move
arrowLeft	React component	React component for left arrow
arrowRight	React component	React component for right arrow
scrollToClick	Boolean	Enable scrolling to specified item
scrollToChild	Number	Which child should scroll to when ScrollToClick is true
scrollBy	Number	Scroll by specific amount of items

Lazy loading

React-overflow-scroll helps optimize your aplication by loading images only as they enter the viewport. It is written in vanilla JavaScript so it makes package lightweight. Make sure to provide data-set as img attribute.

Example:

1<img alt="lazy image" data-src="lazy.jpg" />

Lazy loading will not work correctly with withDots, so make sure to to switch it off.

Styles

Include width propery in sliderStyle prop or in parent's element.

Gotchas

It is not recommended to use navigation dots on mobile. The will not follow slider. Ignore them in props because by default they are hidden or set withDots={false} in props.

Usage examples