react-dragscroll-ts

React Drag Scroll library - smooth content scroll via mouse/touch dragging.

Usage no npm install needed!

<script type="module">
  import reactDragscrollTs from 'https://cdn.skypack.dev/react-dragscroll-ts';
</script>

README

🎉 React DragScroll library

React Drag Scroll library - smooth content scroll via mouse/touch dragging.

Alt text

Usage

import DragScroll from 'react-dragscroll-ts'

interface IDragScrollOptions {
    axis?: string
    allowInputFocus?: boolean
    allowSelectText?: boolean
    scrollTo?: TCoordinate | null
}

const options: IDragScrollOptions = {}
<DragScroll options={options}>
</DragScroll>

Config options prop

Option Type Description
axis string Default is 'x'. There are 3 values: 'x', 'y','xy'
'x' is horizontal direction
'y' is vertical direction
'xy' is both direction
allowInputFocus boolean Allow input fields can be focused
allowSelectText boolean Allow text content can be selected
scrollTo TCoordinate Scroll to specifed position

Examples API

// scroll to specifed position: only update options
const [options, setOptions] = React.useState(defaultOptions)
function scrollTo(): void {
    setOptions({
        ...options,
        scrollTo: {
            x: -300,
            y: 0,
        },
    })
}

License

MIT License (c) 2020 XuanVinh