{"library":"simplebar-react","title":"SimpleBar React Component","description":"SimpleBar-React is a React wrapper component for the core SimpleBar library, which provides highly customizable scrollbars while preserving native browser scroll performance and behaviors. Unlike many other custom scrollbar solutions, it avoids JavaScript-driven scrolling in favor of native `overflow: auto`, ensuring a smooth user experience. The `simplebar-react` package is currently at version 3.3.2. The underlying `simplebar` core library is actively maintained, with version 6.2.7 being stable and a 7.0.0-beta.0 release in progress, indicating a consistent, though not rapid, release cadence for major updates. It is designed for internal scrolling areas (like chat boxes or specific content panels) and explicitly warns against use on the `document.body`. It ships with TypeScript definitions and supports modern React versions.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install simplebar-react"],"cli":null},"imports":["import SimpleBar from 'simplebar-react';","import 'simplebar-react/dist/simplebar.min.css';","import type { Props as SimpleBarProps } from 'simplebar-react';"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import React from 'react';\nimport SimpleBar from 'simplebar-react';\nimport 'simplebar-react/dist/simplebar.min.css';\n\nconst MyScrollableContent = () => (\n  <SimpleBar style={{ maxHeight: 300, border: '1px solid #ccc', padding: '10px' }}>\n    <div style={{ paddingRight: '20px' }}>\n      <p>This is some content that will eventually overflow the container.</p>\n      <p>SimpleBar will provide a custom styled scrollbar for this area.</p>\n      <p>It maintains native scrolling behavior for optimal performance.</p>\n      <p>You can customize the appearance of the scrollbar using CSS variables.</p>\n      <p>Remember not to use SimpleBar on the entire document body.</p>\n      <p>More content to make it scrollable...</p>\n      <p>Line 7</p>\n      <p>Line 8</p>\n      <p>Line 9</p>\n      <p>Line 10</p>\n      <p>Line 11</p>\n      <p>Line 12</p>\n      <p>Line 13</p>\n      <p>Line 14</p>\n      <p>Line 15</p>\n      <p>Line 16</p>\n      <p>Line 17</p>\n      <p>Line 18</p>\n      <p>Line 19</p>\n      <p>Line 20</p>\n    </div>\n  </SimpleBar>\n);\n\nexport default MyScrollableContent;","lang":"typescript","description":"This quickstart demonstrates how to integrate `SimpleBar` into a React component, showing a basic scrollable area with custom scrollbars and imported CSS.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}