# @lemehovskiy/react-scroller > React component for precise vertical scroll progress detection Latest version **0.0.12** (published 2023-10-25) · MIT license · 0 weekly downloads ## Install ```sh npm install @lemehovskiy/react-scroller pnpm add @lemehovskiy/react-scroller yarn add @lemehovskiy/react-scroller bun add @lemehovskiy/react-scroller ``` ## Health **Score 25/100 (F)** — status: abandoned. Positive: has types; no vulnerabilities; high quality score. Warnings: low downloads; no esm support; pre 1.0. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 0.0.12 | | Published | 2023-10-25 | | First published | 2021-12-02 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | bundled | | Module format | CommonJS | | Dependencies | 2 | | Unpacked size | 18.5 KB | | Known vulnerabilities | 0 | | Install scripts | no | | Author | lemehovskiy | | Maintainers | lemehovskiy | | Keywords | react, scroll, progress | ## Links - npm: https://www.npmjs.com/package/@lemehovskiy/react-scroller - Homepage: https://github.com/lemehovskiy/react-scroller#readme - npm.io page: https://npm.io/package/@lemehovskiy/react-scroller ## Dependencies (2) - [react-jss](https://npm.io/package/react-jss.md) ^10.8.2 - [@lemehovskiy/scroller-utils](https://npm.io/package/@lemehovskiy/scroller-utils.md) ^0.0.12 ## 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 - 0.0.12 (latest) — 2023-10-25 - 0.0.11 — 2023-10-17 - 0.0.10 — 2023-10-17 - 0.0.9 — 2022-02-05 - 0.0.8 — 2022-01-29 - 0.0.7 — 2021-12-05 - 0.0.6 — 2021-12-04 - 0.0.5 — 2021-12-04 - 0.0.4 — 2021-12-04 - 0.0.3 — 2021-12-04 - 0.0.2 — 2021-12-04 - 0.0.1 — 2021-12-02 ## README

react-scroller

[![Status](https://img.shields.io/badge/status-active-success.svg)]() [![GitHub Issues](https://img.shields.io/github/issues/lemehovskiy/react-scroller.svg)](https://github.com/lemehovskiy/react-scroller/issues) [![GitHub Pull Requests](https://img.shields.io/github/issues-pr/lemehovskiy/react-scroller.svg)](https://github.com/lemehovskiy/react-scroller/pulls) [![License](https://img.shields.io/badge/license-MIT-blue.svg)](/LICENSE)
---

React component for precise vertical scroll progress detection.

## Demo [Basic Scroller](https://codesandbox.io/s/lemehovskiy-react-scroller-simple-demo-e3c8d?file=/src/App.tsx) [Basic useScroller](https://codesandbox.io/s/lemehovskiy-react-scroller-basic-usescroller-demo-qtj00?file=/src/App.tsx) [Basic parallax background effect](https://codesandbox.io/s/lemehovskiy-react-scroller-basic-parallax-lncoe?file=/src/App.tsx) [Gsap(Greensock) parallax background effect](https://codesandbox.io/s/lemehovskiy-react-scroller-gsap-parallax-yw4cx?file=/src/App.tsx) [Gsap(Greensock) timeline](https://codesandbox.io/s/lemehovskiy-react-scroller-gsap-greensock-timeline-5jzs2) ## 🧐 Features - Vertical Scroll Progress Tracking: Easily monitor scroll progress in your React components for engaging user experiences. - Custom Start and End Offsets: Define precise scroll triggers for your components, enhancing user interactions. - Auto-Adjust Offsets: Ensure seamless tracking even in limited space scenarios, making your components responsive. - Debug Mode: Debug with ease using the built-in visualizer for triggers. ## 🏁 Getting Started ### Installing ```sh npm i @lemehovskiy/react-scroller ``` ### Scroller example App.tsx ```js import Scroller from "@lemehovskiy/react-scroller/dist"; export default function App() { return ( <>
{({ scrollProgress }) => (
{scrollProgress}
)}
); } ``` ### useScroller hook example App.tsx ```js import { useRef } from "react"; import { useScroller } from "@lemehovskiy/react-scroller/dist"; export default function App() { const ref = useRef(null); const { scrollProgress } = useScroller({ ref }); return ( <>
{scrollProgress}
); } ``` ## Scroller API | name | description | type | default | | ---------------------- | --------------------------------------------- | ------------------------------------------------------------- | ------- | | children | | children: (props: { scrollProgress?: number }) => JSX.Element | | | debug | Debug flag property | boolean | false | | scrollTriggerOffset | See useScroller hook API below for more details | | autoAdjustScrollOffset | See useScroller hook API below for more details | ## useScroller hook API | name | description | type | default | | ---------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------- | ------------------ | | ref | | | | | scrollTriggerOffset | Offset for scroll trigger position. By default, the scroll trigger "start" is placed at the bottom, and the trigger "end" at the top. If you want to reduce the start offset by 100px you can pass {start: -100, end: 0} or move the start offset to the middle of the viewport {start: '-50%', end: 0} | {start: number | string, end: number | string } | {start: 0, end: 0} | | autoAdjustScrollOffset | Auto-adjusting start and end offset. This option is helpful if the element is first or last and you can't realize the full progress range. You can manually adjust triggers offset but in this case, you can lose responsive behavior. | boolean | false | --- _Source: https://npm.io/package/@lemehovskiy/react-scroller · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._