@house-agency/scroll-dex

scrolldex

This is a small React component that can be used as a centralized scroll event hub for your app. Simply wrap one or more components and/or elements with this component to give them access to two handy properties that you can use for all your scroll-position-related needs (parallaxing, section initialization etc.)

DEMO

Installation

Install with npm

npm i -D @house-agency/scroll-dex

or yarn

yarn add @house-agency/scroll-dex

Properties

ScrollDex takes two, optional, properties:

Prop	Type	Description
shouldTrackWindow	bool	(default true) If the component should track the scrollY property of the window object (if true) or the scrollTop property of the firstChild DOM-node of the component (if false).
lerpFactor	number	(default 0.1) This is used to interpolate the scroll value to give a damped effect.

Usage

import React from "react";
import ScrollDex from "scroll-dex";

const SomeComponent = ( { scrollPos, lerpScrollPos, scrollRel } ) => (
	<div>The current vertical scroll position is { scrollPos } and the interpolated position is { lerpScrollPos }. The relative scroll position is { scrollRel }.</div>
);

const WrapperComponent = () => (
	<ScrollDex>
		<SomeComponent />
	</ScrollDex>
);