@house-agency/scroll-dex v2.2.3

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:

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>
);