preact-custom-scrollbars
This is a port of malte-wessel's react-custom-scrollbars for Preact
- frictionless native browser scrolling
- native scrollbars for mobile devices
- fully customizable
- auto hide
- auto height
- universal (runs on client & server)
requestAnimationFramefor 60fps- no extra stylesheets
- well tested, 100% code coverage
Installation
npm install preact-custom-scrollbars --saveor
yarn add preact-custom-scrollbarsThis assumes that you’re using npm or yarn package manager with a module bundler like Webpack or Browserify to consume CommonJS modules.
If you don’t yet use npm or a modern module bundler, and would rather prefer a single-file UMD build that makes PreactCustomScrollbars available as a global object, you can grab a pre-built version from unpkg. We don’t recommend this approach for any serious application, as most of the libraries complementary to preact-custom-scrollbars are only available on npm.
Usage
This is the minimal configuration. Check out the Documentation for advanced usage.
import { Scrollbars } from 'preact-custom-scrollbars';
class App extends Component {
render() {
return (
<Scrollbars style={{ width: 500, height: 300 }}>
<p>Some great content...</p>
</Scrollbars>
);
}
}The <Scrollbars> component is completely customizable. Check out the following code:
import { Scrollbars } from 'preact-custom-scrollbars';
class CustomScrollbars extends Component {
render() {
return (
<Scrollbars
onScroll={this.handleScroll}
onScrollFrame={this.handleScrollFrame}
onScrollStart={this.handleScrollStart}
onScrollStop={this.handleScrollStop}
onUpdate={this.handleUpdate}
renderView={this.renderView}
renderTrackHorizontal={this.renderTrackHorizontal}
renderTrackVertical={this.renderTrackVertical}
renderThumbHorizontal={this.renderThumbHorizontal}
renderThumbVertical={this.renderThumbVertical}
autoHide
autoHideTimeout={1000}
autoHideDuration={200}
autoHeight
autoHeightMin={0}
autoHeightMax={200}
thumbMinSize={30}
universal={true}
{...this.props}>
);
}
}All properties are documented in the API docs
Tests
# Make sure that you've installed the dependencies
npm install
# Run tests
npm testCode Coverage
# Run code coverage. Results can be found in `./coverage`
npm run test:covLicense
MIT