RGScroll

React Gravity Scroll is a simple component and hook to keep your container anchored to the bottom.

Small and dependency free
SSR compatible
Headless
Simple and customizable
scrollThreshold:

Generating...

Quick start

ReactGravityScroll ships with a pre-built GravityScrollArea component. You can easily use it in your project as follows:

1import { GravityScrollArea } from "react-gravity-scroll";
2
3export default function App() {
4  const { content } = ...
5
6  return (
7    <GravityScrollArea
8        autoScrollEnabled
9        scrollThreshold={200}
10        >
11        {content}
12    </GravityScrollArea>
13  )
14}

Build your own GravityScroller

You can also use the useGravityScroll hook to build your own gravity scroller component. For example let's use Radix ScrollArea primitive component:

1import * as ScrollArea from "@radix-ui/react-scroll-area";
2import { useGravityScroll, GravityScrollAreaProps } from "react-gravity-scroll";
3
4export function RadixGravityScroll({
5  children,
6  scrollThreshold,
7  autoScrollEnabled,
8}: GravityScrollAreaProps) {
9  const { scrollAreaProps, viewportProps } = useGravityScroll({
10    autoScrollEnabled,
11    scrollThreshold,
12  });
13
14  return (
15    <ScrollArea.Root>
16      {/* The viewport is the element with overflow: scroll */}
17      <ScrollArea.Viewport {...scrollAreaProps}>
18        {/* Here we add the gravity viewport that contains the content of the ScrollArea */}
19        <div {...viewportProps}>{children}</div>
20      </ScrollArea.Viewport>
21      <ScrollArea.Scrollbar orientation="horizontal">
22        <ScrollArea.Thumb />
23      </ScrollArea.Scrollbar>
24      <ScrollArea.Scrollbar orientation="vertical">
25        <ScrollArea.Thumb />
26      </ScrollArea.Scrollbar>
27      <ScrollArea.Corner />
28    </ScrollArea.Root>
29  );
30}
Docs repo