{"library":"react-custom-scrollbars","title":"React Custom Scrollbars","description":"react-custom-scrollbars is a React component library designed to replace native browser scrollbars with fully customizable alternatives, offering a consistent look and feel across different browsers and devices. It prioritizes performance with `requestAnimationFrame` for smooth scrolling and supports universal rendering (SSR). Key features include auto-hide, auto-height, and extensive styling options without requiring external stylesheets. The current stable version is 4.2.1. While not on a fixed release cadence, the project has seen consistent updates in its 4.x series, primarily focusing on React compatibility and bug fixes. It differentiates itself by its focus on native-like behavior, mobile support, and complete visual control, contrasting with simpler scroll solutions or those that inject complex CSS.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install react-custom-scrollbars"],"cli":null},"imports":["import { Scrollbars } from 'react-custom-scrollbars';","const { Scrollbars } = require('react-custom-scrollbars');","this.scrollbars.getScrollHeight();"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import React, { Component } from 'react';\nimport { Scrollbars } from 'react-custom-scrollbars';\n\nclass CustomScrollbarExample extends Component {\n  render() {\n    // Simulate dynamic content that would typically exceed container height\n    const longContent = Array.from({ length: 50 }).map((_, i) => (\n      <p key={i} style={{ marginBottom: '8px', lineHeight: '1.4' }}>\n        This is line {i + 1} of scrollable content. It demonstrates how{' '}\n        <span style={{ fontWeight: 'bold' }}>react-custom-scrollbars</span> handles overflow{' '}\n        with its custom scroll mechanism. The content within the Scrollbars component will be\n        wrapped and managed.\n      </p>\n    ));\n\n    return (\n      <div style={{ padding: '20px', fontFamily: 'Arial, sans-serif', maxWidth: '800px', margin: '0 auto' }}>\n        <h1>Custom Scrollbar Example</h1>\n        <p>\n          Below is a `Scrollbars` component configured with a fixed width and height.\n          The content inside will scroll using the custom scrollbars provided by the library.\n        </p>\n        <div style={{ border: '1px solid #e0e0e0', borderRadius: '4px', overflow: 'hidden' }}>\n          <Scrollbars style={{ width: '100%', height: 300 }}>\n            {longContent}\n          </Scrollbars>\n        </div>\n        <p style={{ marginTop: '20px' }}>\n          This shows the basic usage, allowing for a visually consistent scroll experience\n          across different browsers and operating systems, with full control over the scrollbar's appearance.\n        </p>\n      </div>\n    );\n  }\n}\n\nexport default CustomScrollbarExample;","lang":"javascript","description":"Demonstrates a basic React class component utilizing `Scrollbars` with fixed dimensions to manage overflowing content, showcasing the default custom scrollbar appearance and behavior.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}