{"repo":"stackblitz-labs/use-stick-to-bottom","free":true,"listed":false,"github":"https://github.com/stackblitz-labs/use-stick-to-bottom","clone":"git clone https://github.com/stackblitz-labs/use-stick-to-bottom.git","description":"A lightweight React Hook intended mainly for AI chat applications, for smoothly sticking to bottom of messages","language":"TypeScript","stars":770,"topics":["ai","chatbot","chatgpt","claude","messages","smooth-scrolling"],"license":"MIT","category":"ai-agents","readme_excerpt":"useStickToBottom Designed with AI chat bots in mind If you or your company finds this hook useful Sponsor me on GitHub A lightweight zero-dependency React hook + Component that automatically sticks to the bottom of container and smoothly animates the content to keep it's visual position on screen whilst new content is being added. Features - Does not require overflow-anchor browser-level CSS support which Safari does not support. - Can be connected up to any existing component using a hook with refs. Or simply use the provided component, which handles the refs for you plus provides context - so child components can check isAtBottom & programmatically scroll to the bottom. - Uses the modern, yet well-supported, ResizeObserver API to detect when content resizes. - Supports content shrinking without losing stickiness - not just getting taller. - Correctly handles Scroll Anchoring. This is where when content above the viewport resizes, it doesn't cause the content currently displayed in viewport to jump up or down. - Allows the user to cancel the stickiness at any time by scrolling up. - Clever logic distinguishes the user scrolling from the custom animation scroll events (without doing any debouncing which could cause some events to be missed). - Mobile devices work well with this logic too. - Uses a custom implemented smooth scrolling algorithm, featuring velocity-based spring animations (with configurable parameters). - Other libraries use easing functions with durations inste","default_branch":null,"files":null,"tree":[],"storefront":"/r/stackblitz-labs","claimed":false,"request_supported":{"post":"https://gitbuyer.com/r/stackblitz-labs/use-stick-to-bottom/request-supported","requests":0},"note":"indexed from public GitHub; nothing is for sale on this page. Clone it from GitHub. Paid listings live at /search."}