1.0.3 • Published 1 year ago
@nikolajs/react-scroll-slider v1.0.3
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'
}}>
//...