react-smart-scroller

React-smart-scroller is a library that allows you to create horizontal and vertical scroller in easy way.

Features

• Full responsiveness
• Every child is resized dependent on view cols

Install

yarn add react-smart-scroller or npm install --save react-smart-scroller

Props

Property	Type	Description
numCols	number	Default: undefined. Number of columns per container width. If 1, width of each child is 100%. If not provided, column has childs width.
spacing	number	Default: 0. Space in pixels between elements.
trackProps	React.CssProperties	Default: undefined. CSS styles to original track.
thumb	JSX.Element	Default: rectangle. Element that if provided overrides default rectangle.
vertical	boolean	Default: false. Defines direction of scrollbar - horizontal by default. If height of ReactSmartScroller is not defined it will automatically resize to 100% and scroll will not be visible.

Usage

Basic

Let's create our first component

import React from 'react'
import { ReactSmartScroller } from 'react-smart-scroller'

const renderImages = () => {
    const images = [
        'https://cdn.pixabay.com/photo/2019/06/02/00/46/chapel-4245437__340.jpg',
        'https://cdn.pixabay.com/photo/2017/08/22/22/36/cinque-terre-2670762__340.jpg',
        'https://cdn.pixabay.com/photo/2016/08/01/20/34/girl-1562091__340.jpg',
        'https://cdn.pixabay.com/photo/2013/09/26/23/23/glitter-powder-186829__340.jpg',
        'https://cdn.pixabay.com/photo/2019/04/11/09/50/wave-4119274__340.jpg'
    ]

    return images.map((image, index) => (
        <img
            key={index}
            src={image}
            style={{
                width: '100%',
                height: 300,
                objectFit: 'cover'
            }}
        />
    ))
}

export const Slider = () => (
    <ReactSmartScroller>
        {renderImages()}
    </ReactSmartScroller>
)

This is what you'll see in your browser:

numCols

export const Slider = () => (
    <ReactSmartScroller numCols={3}>
        {renderImages()}
    </ReactSmartScroller>
)

spacing

export const Slider = () => (
    <ReactSmartScroller spacing={24}>
        {renderImages()}
    </ReactSmartScroller>
)

trackProps

export const Slider = () => (
    <ReactSmartScroller
        trackProps={{
            height: 25
        }}
    >
        {renderImages()}
    </ReactSmartScroller>
)

thumb

export const Slider = () => (
    <ReactSmartScroller
        thumb={
            <div
                style={{
                    width: 20,
                    height: 20,
                    borderRadius: '50%',
                    backgroundColor: 'black'
                }}
            />
        }
    >
        {renderImages()}
    </ReactSmartScroller>
)

vertical

export const Slider = () => (
    <div
        style={{
            width: 500,
            height: 600
        }}
    >
        <ReactSmartScroller vertical>
            {renderImages()}
        </ReactSmartScroller>
    </div>
)

todo

• thumb width dependent on scrollWidth
• vertical scroll
• vertical scroll tests
• improve documentation
• more examples in usage