LISN.js

npm install lisn.js
# OR
yarn add lisn.js

Then import the components and any required CSS in your project:

// For example, import the pager widget
import { Pager } from "lisn.js";
import "lisn.js/pager.css"

npm install @lisn.js/react
# OR
yarn add @lisn.js/react

Then import the components and any required CSS in your project:

// For example, import the pager widget
import { PagerComponent, PagerPageComponent } from "@lisn.js/react";
import "lisn.js/pager.css"

Replace lisn.min.js with your bundle of choice.

<script
  src="https://cdn.jsdelivr.net/npm/@lisn.js/bundles@1.0.4/lisn.min.js"
  charset="utf-8"
></script>

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/@lisn.js/bundles@1.0.4/styles/lisn.css"
  type="text/css"
  media="screen"
  title="no title"
  charset="utf-8"
/>

<!-- or download and embed it manually -->

Then use the LISN global variable as your entry point.

// For example, using the scroll watcher
LISN.watchers.ScrollWatcher.onScroll(
  () => {/* do something cool */},
  {/* config... */}
);

or alternatively, just start using the triggers and widgets in HTML-only mode:

<div data-lisn-modal
     data-lisn-on-view="@open +target=top: 50% +rootMargin=-48%,0px +once"
>
  <p>
    Here's a modal popping up to tell you you've reached the middle of the page!
  </p>
  <p class="footnote">
    P.S. Don't do that, popups are annoying.
  </p>
</div>