React-physics-dragger NPM

React Physics Dragger

A simple, no-frills horiztonal dragger/slider with physics

example gif

npm bundle size

This is a React component which basically adds a wrapper element with horizontal dragging capabilities. It uses a little bit of physics to apply friction and boundary bouncing (similar to Apple's interfaces, and the Flickity carousel).

Works with both touch and mouse
0 dependencies
Super small

Example usage

yarn add react-physics-dragger
# or
npm i react-physics-dragger

Internally it uses ResizeObserver so you might need to add a polyfill if you support IE11. If so, instructions below.

import Dragger from 'react-physics-dragger'
import ResizeObserver from 'resize-observer-polyfill' // this one works pretty great

const App = () => {
  return (
    <Dragger
      ResizeObserverPolyfill={ResizeObserver} // remember; only if you need it, else it uses window.ResizeObserver
    >
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </Dragger>
  )
}

Props

Property	Type	Default Value	Description
`friction`	number	0.95	Optional. Lower values feel grippier, higher values feel slippier.
`draggerRef`	function		Optional. Use to access the components internal methods (see below section "Ref Methods") and Example1.
`onFrame`	callback function		Optional. This function is fired on every movement, resize, and mount. It provides one param object includes the `x` position, `progress` (from 0 to 1), and dragger dimensions. See Example2.
`onDown`	callback function		Optional. Fired on mouse or touch press.
`onUp`	callback function		Optional. Fired on mouse or touch release.
`onStaticClick`	function		Optional. Fired when an item within the dragger is clicked (or tapped). Useful for avoiding events where dragging can be considered a click.
`setCursorStyles`	boolean	true	Optional. If enabled, styles are added/removed to the `<html>` element for grabbing cursor styles.
`className`	string		Optional. Add your own class name to the outer element
`style`	CSSProperties		Optional. Add your own styles to the outer element
`innerStyle`	CSSProperties		Optional. Add your own styles to the inner element
`disabled`	boolean	false	Optional. Enable/disable the component.
`ResizeObserverPolyfill`			Optional. If you need the polyfill pass it in as a prop.

Ref Methods

Property	Type	Description
`setPosition`	function	Changes the position of the slider. `draggerRef.current.setPosition(x, false)` where `x` is the pixel value. Accepts a second argument (boolean, false by default) which determines whether to move to setPosition value instantly.