react-scrollx

    0.1.2 • Public • Published

    React Scrollx

    React Scrolls is a react component that provides a custom, smooth, and cross-browser scroll.

    Motivation

    The main idea of React Scrollx is the possibility of creating a cross-browser and customized scroll bar, which can be adapted to most layouts.

    Installation

    npm install -D react-scrollx

    Usage

    This minimal instructions will allow you to insert any type of your content like React components, jsx or raw text.

    //ES6
    import ReactScrollx from 'react-scrolls';
    import 'react-scrollx/dist/react-scrollx.css';
     
    <ReactScrollx width={100} height={350}>
        <YourContent/>
    </ReactScrollx>

    API Reference (options/callbacks)

    height

    • Prop type: Number;
    • isRequired: true;
    • Set the height for your scroll container, takes a value in pixels;

    width

    • Prop type: Number | String;
    • isRequired: true;
    • Set the width for your scroll container. Can take a value in both pixels and in percentage. In case of percents value must be a String;
    <ReactScrollx height={400} width="60%"> //here example of percentage width

    scrollBarClassName

    • Prop type: String;
    • isRequired: false;
    • Set a custom CSS class for scroll bar;

    #### scrollThumbClassName

    • Prop type: String;
    • isRequired: false;
    • Set a custom CSS class for scroll thumb;

    #### scrollContainerClassName

    • Prop type: String;
    • isRequired: false;
    • Set a custom CSS class for scroll container;

    #### appearOnHover

    • Prop type: Boolean;
    • isRequired: false;
    • By default the scroll is always visible, but setting this option to true will remove the scroll bar and will only show by mouse hover on scroll container;r;

    #### scrollBarVisible

    • Prop type: Boolean;
    • isRequired: false;
    • Set visible status of scroll bar;

    ### Callbacks

    #### onTopPosition

    • fire up when scroll thumb come his topmost position;

    #### onBottomPosition

    • fire up when scroll thumb come his bottommost position;

    #### onScroll

    • fire up everytime when user scrolls;

    ## Author Bulavyk Serj

    ## License This project is licensed under the MIT License

    Install

    npm i react-scrollx

    DownloadsWeekly Downloads

    2

    Version

    0.1.2

    License

    MIT

    Last publish

    Collaborators

    • becherman