This React hook and component library addresses the common challenge of maintaining a "stick-to-bottom" behavior in scrollable containers, particularly for dynamic content like AI chat applications. It offers a zero-dependency solution for developers needing to ensure users are always viewing the latest content without manual scrolling, while also providing smooth animations and robust handling of various scrolling scenarios.

How It Works

The library leverages the ResizeObserver API to detect content changes and implements a custom, velocity-based spring animation algorithm for smooth scrolling. This approach avoids reliance on the overflow-anchor CSS property, which has limited browser support (notably absent in Safari). It also incorporates sophisticated logic to distinguish user-initiated scrolls from programmatic scrolls, allowing users to naturally break the "stickiness" by scrolling up, and correctly handles scroll anchoring to prevent viewport jumps during content resizing.

Quick Start & Requirements

• Install via npm: npm install use-stick-to-bottom or yarn: yarn add use-stick-to-bottom.
• Requires React.
• Official documentation and examples are available within the README.

Highlighted Details

• Provides both a hook (useStickToBottom) and a component (StickToBottom) for flexible integration.
• Implements custom smooth scrolling with velocity-based spring animations, outperforming duration-based easing for streaming content.
• Correctly handles scroll anchoring, preventing content jumps when elements above the viewport resize.
• Allows users to manually break stickiness by scrolling up, with logic to differentiate user vs. programmatic scrolls.

Maintenance & Community

• Developed by StackBlitz Labs.
• No specific community links (Discord, Slack) or roadmap details are provided in the README.

Licensing & Compatibility

• Licensed under the MIT License.
• Permissive license suitable for commercial and closed-source applications.

Limitations & Caveats

The library is designed for React applications and relies on modern browser APIs like ResizeObserver. While it aims for broad compatibility, older browsers lacking these features might not be fully supported.