React-smart-scroller is a library that allows you to create highly customizable horizontal or vertical scroller in easy way.
You can modify scrollbar track just like you want, adding some styles to it, and change look of scrollbar thumb just simply passing styled JSX Element.
Define your own spacing or columns per scroller width simply passing props.
Features
- Full responsiveness
- Every child is resized dependent on view cols
- Highly customizable track
- Possibility of passing own thumb (own component)
- Vertical scroll
- Spacing between columns
- Draggable content
- Well typed (Typescript)
- Server Side Rendering friendly
- Horizontal Slider with arrows and dots
Live demo
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. |
style | React.CssProperties | Default: undefined .Custom styles applied to wrapper. |
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. |
draggable | boolean | Default: false .Allows to scroll by dragging content. |
pagination | boolean | Default: false .Renders Slider with children, arrowRight, arrowLeft and dots (number of dots same as children length) |
startAt | { startIndex: number center?: boolean } |
Default: undefined .Defines start position of scroller (index of element) |
paginationConfig | { infinite?: boolean, unactiveDotsColor?: string, activeDotColor?: string, transitionTime?: number, minOffsetToChangeSlide?: number, draggable?: boolean, withScroll?: boolean } |
Default: undefined .infinite is optional boolean that allows user to scroll to first element from lsat after clicking next and in opposite wayuncativeDotsColor is optional string that defines unactive color of dots, default: gray activeDotColor is optional string that defines active color of dot, default: green transitionTime is optional number that sets transition time between slides Default: 1s minOffsetToChangeSlide is optional number that defines minimal offset needed to change slide in pixels Default: 150px draggable is optional boolean that enables switching slides by dragging them Default: false withScroll is optional boolean that enables -> for horizontal scroll pagination and for pagination scrollable inner wrapperrenderNextToEachOther is optional boolean that enables to render children next to each other |
renderPagination | ({ selectedDot: number, childrenCount: number, onNext(): void, onPrev(): void, onDotClick(index: number): void }) => JSX.Element |
Default: undefined .Replaces original pagination, first element is arrowLeft and last element is arrowRight, elements in between are 'dots' selectedDot is an index of selectedDotchildrenCount number of children onNext function that triggers next slideonPrev function that triggers previous slideonDotClick is a function that requires index of clicked dot, triggers transition to selected slide |
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>
)
draggable
export const Slider = () => (
<ReactSmartScroller draggable>
{renderImages()}
</ReactSmartScroller>
)
pagination
export const Slider = () => (
<ReactSmartScroller pagination>
{renderImages()}
</ReactSmartScroller>
)
renderPagination
const renderDots = (onDotClick: (index: number) => void, selectedDot: number) => images.map((value, index) => {
const backgroundColor = selectedDot === index
? 'black'
: 'gray'
return (
<Dot
key={index}
onClick={() => onDotClick(index)}
>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<path fill={backgroundColor} d="M144 268.4V358c0 6.9 4.5 14 11.4 14H184v52c0 13.3 10.7 24 24 24s24-10.7 24-24v-52h49v52c0 7.5 3.4 14.2 8.8 18.6 3.9 3.4 9.1 5.4 14.7 5.4h.5c13.3 0 24-10.7 24-24v-52h27.6c7 0 11.4-7.1 11.4-13.9V192H144v76.4zM408 176c-13.3 0-24 10.7-24 24v96c0 13.3 10.7 24 24 24s24-10.7 24-24v-96c0-13.3-10.7-24-24-24zM104 176c-13.3 0-24 10.7-24 24v96c0 13.3 10.7 24 24 24s24-10.7 24-24v-96c0-13.3-10.7-24-24-24z"/>
<g>
<path fill={backgroundColor} d="M311.2 89.1l18.5-21.9c.4-.5-.2-1.6-1.3-2.5-1.1-.8-2.4-1-2.7-.4l-19.2 22.8c-13.6-5.4-30.2-8.8-50.6-8.8-20.5-.1-37.2 3.2-50.8 8.5l-19-22.4c-.4-.5-1.6-.4-2.7.4s-1.7 1.8-1.3 2.5l18.3 21.6c-48.2 20.9-55.4 72.2-56.4 87.2h223.6c-.9-15.1-8-65.7-56.4-87zm-104.4 49.8c-7.4 0-13.5-6-13.5-13.3 0-7.3 6-13.3 13.5-13.3 7.4 0 13.5 6 13.5 13.3 0 7.3-6 13.3-13.5 13.3zm98.4 0c-7.4 0-13.5-6-13.5-13.3 0-7.3 6-13.3 13.5-13.3 7.4 0 13.5 6 13.5 13.3 0 7.3-6.1 13.3-13.5 13.3z"/>
</g>
</svg>
</Dot>
)
})
const renderPagination = ({ onNext, onPrev, onDotClick, selectedDot }: RenderPaginationProps) => {
return (
<Wrapper>
<LeftArrow
src={arrowLeft}
onClick={onPrev}
/>
{renderDots(onDotClick, selectedDot)}
<RightArrow
src={arrowRight}
onClick={onNext}
/>
</Wrapper>
)
}
export const Slider = () => (
<ReactSmartScroller
pagination
renderPagination={renderPagination}
>
{renderImages()}
</ReactSmartScroller>
)
paginationConfig
infinite
export const Slider = () => (
<ReactSmartScroller
pagination
paginationConfig={{
infinite: true
}}
>
{renderImages()}
</ReactSmartScroller>
)
draggable
export const Slider = () => (
<ReactSmartScroller
pagination
paginationConfig={{
draggable: true
}}
>
{renderImages()}
</ReactSmartScroller>
)
transitionTime
export const Slider = () => (
<ReactSmartScroller
pagination
paginationConfig={{
transitionTime: 0.25
}}
>
{renderImages()}
</ReactSmartScroller>
)
minOffsetToChangeSlide
export const Slider = () => (
<ReactSmartScroller
pagination
paginationConfig={{
minOffsetToChangeSlide: 25
}}
>
{renderImages()}
</ReactSmartScroller>
)
unactiveDotsColor
export const Slider = () => (
<ReactSmartScroller
pagination
paginationConfig={{
unactiveDotsColor: 'gray'
}}
>
{renderImages()}
</ReactSmartScroller>
)
activeDotsColor
export const Slider = () => (
<ReactSmartScroller
pagination
paginationConfig={{
activeDotColor: 'red'
}}
>
{renderImages()}
</ReactSmartScroller>
)