# @nikolajs/react-scroll-slider

> A react library that renders a vertical scroll slider

Latest version **1.0.3** (published 2023-01-18) · MIT license · 0 weekly downloads

## Install

```sh
npm install @nikolajs/react-scroll-slider
pnpm add @nikolajs/react-scroll-slider
yarn add @nikolajs/react-scroll-slider
bun add @nikolajs/react-scroll-slider
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.3 |
| Published | 2023-01-18 |
| First published | 2023-01-18 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 4 |
| Unpacked size | 12 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 2 |
| Author | nicolas-saikali |
| Maintainers | nikolajs |
| Keywords | react, scroll, slider, scrollslider, scroll-slider, library, reactjs, javascript, animations, animation, transitions, transition |

## Links

- npm: https://www.npmjs.com/package/@nikolajs/react-scroll-slider
- Repository: https://github.com/NicolasSaikali/react-scroll-slider
- Homepage: https://github.com/NicolasSaikali/react-scroll-slider#readme
- Issues: https://github.com/NicolasSaikali/react-scroll-slider/issues
- npm.io page: https://npm.io/package/@nikolajs/react-scroll-slider

## Dependencies (4)

- [react](https://npm.io/package/react.md) ^18.2.0
- [react-dom](https://npm.io/package/react-dom.md) ^18.2.0
- [@types/react](https://npm.io/package/@types/react.md) ^18.0.26
- [@types/react-dom](https://npm.io/package/@types/react-dom.md) ^18.0.10

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.0.3 (latest) — 2023-01-18
- 1.0.2 — 2023-01-18

## README

# 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/](http://nicolas-saikali.com/)
## Usage
```typescript
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<ScrollSliderOOP> \| 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
```typescript
<Button
    onClick={() => ref?.current?.navigateToIndex(1)}
>
//...
```

### sensitivity
#### Example
```typescript
<ScrollSlider
    sensitivity={ScrollSliderSensitivity.HIGH}
>
//...
```

### animationOptions
#### Example 
```typescript
<ScrollSlider
    animationOptions={{
        easing: 'linear'
    }}>
//...
```

---
_Source: https://npm.io/package/@nikolajs/react-scroll-slider · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._