{"library":"react-perfect-scrollbar","title":"React Perfect Scrollbar","description":"react-perfect-scrollbar is a React component that wraps the 'perfect-scrollbar' library, providing a highly customizable and performant scrollbar solution for web applications. The current stable version is 1.5.8. Releases appear to be less frequent than monthly, but consistent enough to indicate active maintenance, with recent updates addressing bug fixes, new features like `onSync`, and improved TypeScript definitions. Its primary differentiator is offering a polished, native-feeling scroll experience that avoids the limitations and inconsistencies of default browser scrollbars, especially useful in complex UIs where standard scrollbars might be visually jarring or functionally inadequate. It achieves this by taking control of scroll behavior and rendering custom scrollbars that blend seamlessly with application design, while still relying on the underlying perfect-scrollbar library for the core functionality.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install react-perfect-scrollbar"],"cli":null},"imports":["import PerfectScrollbar from 'react-perfect-scrollbar';","import 'react-perfect-scrollbar/dist/css/styles.css';","import type { PerfectScrollbarProps } from 'react-perfect-scrollbar';"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import React, { useRef, useEffect } from 'react';\nimport PerfectScrollbar from 'react-perfect-scrollbar';\nimport 'react-perfect-scrollbar/dist/css/styles.css';\n\nfunction MyScrollableComponent() {\n  const scrollRef = useRef(null);\n\n  useEffect(() => {\n    // Example: Scroll to bottom on mount\n    if (scrollRef.current) {\n      scrollRef.current.scrollTop = scrollRef.current.scrollHeight;\n    }\n  }, []);\n\n  return (\n    <div style={{ width: '300px', height: '200px', border: '1px solid #ccc' }}>\n      <PerfectScrollbar\n        containerRef={ref => (scrollRef.current = ref)}\n        options={{ suppressScrollX: false }}\n        onScrollY={container => console.log(`Scrolled Y: ${container.scrollTop}`)}\n        style={{ maxHeight: '100%', maxWidth: '100%' }}\n      >\n        <div style={{ height: '500px', padding: '10px' }}>\n          {Array.from({ length: 50 }).map((_, i) => (\n            <p key={i}>Item {i + 1}: This is some scrollable content.</p>\n          ))}\n        </div>\n      </PerfectScrollbar>\n    </div>\n  );\n}\n\n// To render this:\n// ReactDOM.render(<MyScrollableComponent />, document.getElementById('root'));","lang":"typescript","description":"Demonstrates basic usage of PerfectScrollbar, including importing the component and its styles, wrapping content, configuring options, accessing the containerRef, and handling scroll events in a functional React component.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}