Nutty Penguin Music

    drag-scroll-provider

    1.0.6 • Public • Published

    Drag Scroll Provider

    Simple react component to enable scrolling with the mouse.

    Installation

    yarn add drag-scroll-provider

    or

    npm install --save drag-scroll-provider

    Usage

    • Import component
    import DragScrollProvider from 'drag-scroll-provider'
    • Wrap the component you want to drag and scroll
    <DragScrollProvider>
        {({ onMouseDown, ref }) => (
            <div
              className="scrollable"
              ref={ref}
              onMouseDown={onMouseDown}>
                // content that overflows the parent
            </div>
        )}
    </DragScrollProvider>
    • Make sure the element has fixed width (is you want to scroll horizontally) or fixed height (if you want to scroll vertically) and has the overflow propert scroll.
    .scrollable {
        width: 500px;
        overflow-x: scroll;   
    }

    optional: hide the scrollbar

    .scrollable::-webkit-scrollbar {
        display: none;
    } 
     

    Props

    • <DragScrollProvider vertical='true'> for vertical scroll.

    Available functions provided

    {{
       onMouseDown: this.provisionOnMouseDown, // required
       ref: this.provisionRef, // required
       clickItem: this.clickItem, // wraps onClick events on children
       scrollTo: this.scrollTo, // scroll to specific value (useful for animations)
    }}
    

    Handle on click event on child components

    When you need to handle a click events on child components you need to wrap your click event on this provided function so the scroller knows that is not a drag triggering click, mainly for avoiding weird issues with the scroll.

    Lets say you have a <Card /> component that handles a click event

    <Card onClick={this.handleClick}>

    So we need to wrap this click event like this

    <DragScrollProvider>
      {({ onMouseDown, ref, clickItem }) => (
        <div
          className="example__scroll"
          ref={ref}
          onMouseDown={onMouseDown}
        >
            <Card onClick={() => clickItem(this.handleClick)}>
        </div>
      )}
    </DragScrollProvider>

    Install

    npm i drag-scroll-provider

    DownloadsWeekly Downloads

    267

    Version

    1.0.6

    License

    MIT

    Unpacked Size

    17.5 kB

    Total Files

    5

    Last publish

    Collaborators

    • davidsa