react-scroll-slider

A package developed to design web application based on a vertical slider. Where each page / section is a slide. You can check my website for example http://nicolas-saikali.com/

Usage

function App(){
    const ref: Ref<ScrollSlider> = useRef(null)
    const [activeIndex, setActiveIndex] = useState(0)
    const [progress, setProgress] = useState(0)
    
    return (
        <ScrollSlider
            ref={ref}
            withProgress={true}
            onSlideChange={setActiveIndex}
            onProgress={setProgress}
            sensitivity={ScrollSliderSensitivity.HIGH}
            animationOptions={{
                easing: 'linear'
            }}
            slides={[
                {
                    children: <h1> Slide 1 </h1>
                },
                {
                    children: <h1> Slide 2 </h1>
                },
                {
                    children: <h1> Slide 3 </h1>
                },
            ]}
        >
    )
}

Properties

Property | Required | Type | Description --- | --- | --- | --- ref | false | Ref | null | undefined; | Ref object to use in the screen slides | true | Array<{ children: any }> | The slides to show sensitivity | false | ScrollSliderSensitivity | The sensitivity of the mouse wheel progressComponent | false | JSX.Element | Custom progress component withProgress | false | boolean | Defined whether to show the progress component or not animationOptions | false | KeyframeAnimationOptions | Custom animation options progressStyle | false | CSSProperties | Custom styles of the default progress component style | false | CSSProperties | Custom styles for the slider preventDefaultOn | false | string[] | List of selectors to lock scrolling on (when mouse pointer is over any of them) onSlideChange | false | (index:number)=>void | callback to execute when active slide changes onProgress | false | (progress: number)=>void | callback to execute on progress (0~1)

ref

Example

<Button
    onClick={() => ref?.current?.navigateToIndex(1)}
>
//...

sensitivity

Example

<ScrollSlider
    sensitivity={ScrollSliderSensitivity.HIGH}
>
//...

animationOptions

Example

<ScrollSlider
    animationOptions={{
        easing: 'linear'
    }}>
//...