Modern React component for scroll-based triggers and animations with TypeScript support. A rewritten and modernized version of the original react-scroll-trigger package.
npm install @ppasmik/react-scroll-trigger
A modern, TypeScript-based React component for monitoring scroll events and triggering callbacks when elements enter, exit, or progress through the viewport. This is a rewritten and modernized version of the original react-scroll-trigger package.
Each callback includes progress and velocity parameters, enabling precise control over animations and transitions based on scroll position and speed.
``sh`
npm install @ppasmik/react-scroll-trigger
or via Yarn:
`sh`
yarn add @ppasmik/react-scroll-trigger
`tsx
import ScrollTrigger from '@ppasmik/react-scroll-trigger';
const MyComponent = () => {
const [visible, setVisible] = useState(false);
const onEnterViewport = () => {
setVisible(true);
};
const onExitViewport = () => {
setVisible(false);
};
return ( The - As a standalone element without children - With children to receive events based on their dimensions Common use cases include: - Triggering animations when elements become visible | Prop | Type | Default | Description | Standard React props (className, style, etc.) are also supported and will be passed to the wrapper element. The component uses React hooks for efficient state management: - Visibility detection: - Uses The component is designed to work with both window-level scrolling and custom scroll containers (via MIT © [Peter Pasmik] This package is a TypeScript rewrite of the original react-scroll-trigger package, modernized with current React practices and enhanced type safety.
container ${visible ? 'container-animate' : ''}} />`
);
}; component is designed to be highly flexible. You can use it:`tsx`tsx`
Your content here
- Loading content dynamically based on scroll position
- Creating scroll-based transitions and effects
- Implementing infinite scroll functionalityProps
| ---------------- | -------------------- | ------------------------ | -------------------------------------------------------------------- |
| | ElementType | 'div' | React component or HTML element to render as wrapper |containerRef
| | HTMLElement ⎮ string | document.documentElement | Scrolling container reference |throttleResize
| | number | 100 | Resize event throttle in ms |throttleScroll
| | number | 100 | Scroll event throttle in ms |triggerOnLoad
| | boolean | true | Whether to trigger onEnter on mount |onEnter
| | function | - | Called when element enters viewport ({progress, velocity}) => void |onExit
| | function | - | Called when element exits viewport ({progress, velocity}) => void |onProgress
| | function | - | Called during scroll ({progress, velocity}) => void |useRefTechnical Details
to track the DOM element positionuseState
- for viewport visibility and scroll trackinguseEffect
- for handling scroll and resize events with proper cleanupgetBoundingClientRect() for accurate element position calculation`
- Progress is calculated based on element's position relative to viewport:
ts`
progress = 1 - elementRect.bottom / (viewportEnd + elementRect.height);
- Velocity is derived from scroll position changes over time
- All calculations are throttled (default 100ms) to optimize performanceLicense
Acknowledgments