react-atom-trigger

react-atom-trigger

AtomTrigger helps solve the problem of executing code when some element "scrolls into (or out of) view". A pretty simple "react-waypoint" alternative written in Typescript.

Basic features

Exposes <AtomTrigger {...props} /> component, where props are:

interface IAtomTriggerProps {
  scrollEvent: ScrollEvent;
  dimensions: Dimensions;
  behavior?: 'default' | 'enter' | 'leave';
  callback: () => unknown;
  getDebugInfo?: (data: DebugInfo) => void;
  triggerOnce?: boolean;
  className?: string;
  offset?: [number, number, number, number];
}

In order to "work" AtomTrigger needs callback, dimensions and simple scroll event data provided.

Callback

The function to be executed when AtomTrigger enters or leaves some container.

callback: () => unknown;

Dimensions

Dimensions of the main "container" (window in many cases).

type Dimensions = {
  width: number;
  height: number;
};

So if you have some logic of calculating container size and container resize handling, just provide needed data to AtomTrigger.

Scroll Event

To trigger "events" AtomTrigger needs some kind of simple scroll event provided.

type ScrollEvent = { 
    scrollX: number; 
    scrollY: number;
};

So, if you already have some scroll event listener, just provide it to AtomTrigger.

Utility hooks

For someone who wants everything out-of-the-box, useWindowDimensions, useWindowScroll and useContainerScroll hooks are also available for import.

Build

This package is built with tsdown.

Build output:

lib/index.js
lib/index.es.js
lib/index.d.ts

UMD global

When the UMD bundle is loaded directly in the browser, the library is exposed as window.reactAtomTrigger.

Examples

It is sometimes better to tweak and see for yourself: CodeSandbox examples.

More detailed react-atom-trigger overview with examples