Neutron Polarization Manipulator

    react-atom-trigger
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.2 • Public • Published

    react-atom-trigger

    Simple "react-waypoint" alternative.

    Basic features

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

    interface IAtomTriggerProps {
      scrollEvent: ScrollEvent;
      dimensions: Dimensions | null;
      behavior?: 'default' | 'enter' | 'leave';
      callback: () => void | Promise<void>;
      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: () => void | Promise<void>
    

    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.

    Examples

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

    More detailed react-atom-trigger overview is available as Medium story.

    Install

    npm i react-atom-trigger

    DownloadsWeekly Downloads

    20

    Version

    1.0.2

    License

    MIT

    Unpacked Size

    67 kB

    Total Files

    10

    Last publish

    Collaborators

    • innrvoice