Neat Paraskavedekatriaphobia's Meaning

    react-awesome-scroll

    0.1.4 • Public • Published

    react-awesome-scroll

    npm npm version

    • Custom styled scrollbar with exact native behavior.
    • Easily customisable
    • No external dependencies
    • Has 2 style presets out of the box: You can use it out of box or just with the styles needed for component to scroll content properly. (Or disable all of the styles and add them manually in your project stylesheet system).

    Demo

    Installation

    npm

    npm install react-awesome-scroll --save

    yarn

    yarn add react-awesome-scroll

    Usage

    Basic

    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>
        );
      }
    }
      

    Customised

    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>
        );
      }
    }

    Install

    npm i react-awesome-scroll

    DownloadsWeekly Downloads

    11

    Version

    0.1.4

    License

    MIT

    Last publish

    Collaborators

    • banana.bobby