Official site | Demos | Docs

Intro

LISN.js is a flexible, full-featured and simple to use library for handling user gestures and interactions (like scrolling) as well as observing elements for changes in viewport position, size and so on.

LISN handles all complexities (and browser quirks) so you can simply handle user gestures, interactions and layout events. It makes it super simple and easy to implement any kind of scroll, view, size, layout or user gesture triggered actions or animations with minimal boilerplate, and even if you wish, with zero JavaScript, using the HTML-only mode (perfect for Wordpress for example!).

• 100% vanilla TypeScript.
• No layout thrashing.
• Optimal performance.
• Server-side rendering.
• Flexible and customizable.
• Easy and simple to use.
• No dependencies.
• HTML-only mode.

There are React wrappers available as a separate package. It works in server-side rendering environments like Next.js.

LISN also comes with many awesome widgets, like:

• Collapsible
• Floating popup/tooltip
• Modal
• Offcanvas menu
• Pager (carousel/slider/tabs)
• Flex same-height
• Scrollbars (native scrolling)
• Sortable
• Auto-hide/remove matching elements
• Scroll-to-top button
• Page loader

Coming soon:

• SmoothScroller (native scroll)

Installing

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

Loading it

// Import whatever components from "lisn.js"
import { GestureWatcher, Pager } from "lisn.js";

Or use the pre-built browser bundles:

<script
  src="https://cdn.jsdelivr.net/npm/@lisn.js/[email protected]/lisn.min.js"
  charset="utf-8"
></script>

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

There are slim and essential bundles that include less features, so you can load whichever one you need. See Choose your bundle

React wrappers

Install the @lisn.js/react package and import the components you need:

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

// Import whatever components from "lisn.js"
import { useScrollbar, PagerComponent } from "@lisn.js/react";

Contributing >>