Skip to content
Switch branches/tags
Go to file

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time

React Physics Dragger

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

example gif

NPM npm bundle size

Example site

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

It uses ResizeObserver so you might need to add a polyfill. If so, instructions below.

import Dragger from 'react-physics-dragger'
import ResizeObserver from 'resize-observer-polyfill' // If you need a ResizeObserver polyfill, this one works pretty great

const App = () => {
  return (
      className="dragger" // Pass in whatever classNames or styles you'd like


Property Type Default Description
ref React Ref Optional. Use to access the components Ref 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.
setCursorStyles boolean true Optional. If enabled, styles are added/removed to the <html> element for grabbing cursor styles.
disabled boolean false Optional. Enable/disable the component.
friction number 0.92 Optional. Lower values feel grippier, higher values feel slippier.
ResizeObserver 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) where x is the pixel value


Inspired by Dave DeSandro's work on Practical UI Physics; and

This library was packaged with


MIT © nickmcmillan


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



No releases published


No packages published

Contributors 4