Sentient Scroller

A React library that provides a scroll management component for remembering and navigating back to previous scroll positions.

Please note that the SentientScroller component currently works for scrolling events in the entire window, as it relies on the window object. Support for scrolling within specific elements (e.g. divs) will be introduced in future versions.

Installation

# npm
npm i sentient-scroller

# yarn
yarn add sentient-scroller

# pnpm
pnpm add sentient-scroller

Usage

import { SentientScroller } from "sentient-scroller";

export default function Home() {
  return (
    <main className={styles.main}>
      <SentientScroller timeThreshold={1000}>
        {...}
      </SentientScroller>
    </main>
  );
}

Props

| Name | Required | Description | | ----------------- | -------- | ------------------------------------------------- | | timeThreshold | Yes | The threshold (in milliseconds) for considering a position as stable before storing it. A new position will only be stored if the user remains in the same position for longer than this threshold. | | positionThreshold | No | Defaults to 0. The threshold (in pixels) for considering a position worthy of storing. A new position will only be stored if the distance to the last stored position is longer than this threshold. | | behavior | No | The behavior of the scroll button. "sequential" (default): Scrolls to the last stored position that's different from the current position. "static": Scrolls to the first stored position that's different from the current position. |

kyrers