React Perfect Scrollbar

A React component wrapper for perfect-scrollbar.

Features

• TypeScript support
• Lightweight wrapper around perfect-scrollbar
• Automatic cleanup of event listeners and observers
• Support for all perfect-scrollbar events and options

Installation

npm install @vinelink/react-perfect-scrollbar

Usage

import { Container } from "@vinelink/react-perfect-scrollbar";
import "@vinelink/react-perfect-scrollbar/style.css";

<Container>
  <div style={{ height: "9999px" }} />
</Container>;

Options

The Container component accepts all options supported by perfect-scrollbar.

<Container
  options={{
    suppressScrollX: true,
    wheelPropagation: false,
    // ... other options
  }}
/>

See the full option list in the perfect-scrollbar documentation.

Events

The Container component emits all events supported by perfect-scrollbar.

<Container
  onScroll={() => console.log("scrolled")}
  onScrollEnd={() => console.log("scroll ended")}
  // ... other events
/>

Ref & Hooks

The ref exposes the perfect-scrollbar instance, the container element, and an update() method.

import { useRef } from "react";
import {
  Container,
  type ContainerRef,
  useContainer,
} from "@vinelink/react-perfect-scrollbar";

const Example = () => {
  const ref = useRef<ContainerRef>(null);
  const { getPsInstance, getContainer, update } = useContainer(ref);

  return (
    <Container ref={ref}>
      <div style={{ height: "9999px" }} />
    </Container>
  );
};

License

MIT