Custom scrollbar and scroll area components with native mechanics.
MIT License
npm install react-awesome-scroll --save
yarn add react-awesome-scroll
In order to use the component with it out-of-the-box design, you'll need to just call the component in your React app. You will also need to limit the height of its wrapper, so that the component can get its size limits.
import Scroll from 'react-awesome-scroll';
class CustomScroll extends Component {
// Contains demo wrapper
render() {
return (
<div style={{ height: 300 }}>
<Scroll>
/* Any content here */
</Scroll>
</div>
);
}
}
import Scroll from 'react-awesome-scroll';
class CustomScroll extends Component {
// Contains demo wrapper
render() {
return (
<div style={{ height: 300 }}>
<Scroll
className="scroll"
containerClassName="scroll-container"
innerClassName="scroll-inner"
scrollClassName="scroll-track"
barClassName="scroll-bar"
barActiveClassName="scroll-bar-active"
disableStyles
disableUIStyles
>
/* Any content here */
</Scroll>
</div>
);
}
}