Exciting release!Introducing "safe npm". Learn more
Socket
Log inDemoInstall

react-scroll-ondrag

Package Overview
Dependencies
1
Maintainers
2
Versions
10
Issues
File Explorer

Advanced tools

react-scroll-ondrag

React library for scrolling elements by dragging the mouse

    3.0.1latest
    Github

Version published
Maintainers
2
Weekly downloads
696
decreased by-14.81%

Weekly downloads

Readme

Source

react-scroll-ondrag

Build Status npm package Coverage Status

Scroll your elements by dragging your mouse

Live demo

You can see the simplest demo here: Live demo

Install

$ npm install --save react-scroll-ondrag

Examples

Run examples:

$ npm ci $ cd examples $ npm ci $ npm start

Usage

import { useRef } from 'react'; import useScrollOnDrag from 'react-scroll-ondrag'; const App = () => { const ref = useRef(); const { events } = useScrollOnDrag(ref); return <div {...events} ref={ref} />; };

Arguments

ref

Type: a React ref, required

A ref to the DOM element whose scroll position you want to control

options

Type: object

options.runScroll

Type: function: ({ dx: Integer, dy: Integer }) => void Default:

// ref is the first argument to the hook, documented above ({ dx, dy }) => { const maxHorizontalScroll = dom => dom.scrollWidth - dom.clientWidth; const maxVerticalScroll = dom => dom.scrollHeight - dom.clientHeight; const offsetX = Math.min(maxHorizontalScroll(ref.current), ref.current.scrollLeft + dx); ref.current.scrollLeft = offsetX; // eslint-disable-line no-param-reassign const offsetY = Math.min(maxVerticalScroll(ref.current), ref.current.scrollTop + dy); ref.current.scrollTop = offsetY; // eslint-disable-line no-param-reassign }

Used to customize scroll, i.e., scroll only in horizontal direction, change scroll speed, etc

options.onDragStart

Type: function: () => void

Called when scrolling by dragging starts

options.onDragEnd

Type: function: () => void

Called when scrolling by dragging ends

Return value

Type: object, shape: { events: { onMouseDown } }

An object with the events to inject to the controlled element.

License

See the LICENSE file for license rights and limitations (MIT).

Keywords

FAQs

Last updated on 01 Feb 2023

Did you know?

Socket installs a Github app to automatically flag issues on every pull request and report the health of your dependencies. Find out what is inside your node modules and prevent malicious activity before you update the dependencies.

Install Socket
Socket
support@socket.devSocket SOC 2 Logo

Product

  • Package Issues
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc