npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

react-smart-scroller

v1.1.22

Published

React-smart-scroller is a library that allows you to create highly customizable horizontal or vertical scroller in easy way. You can modify track styles or pass your own thumb (own component)

Downloads

787

Readme

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 way uncativeDotsColor 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: falsewithScroll 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 selectedDot childrenCount number of children onNext function that triggers next slide onPrev function that triggers previous slide onDotClick 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>
)