Skip to content
A simple, no-frills horiztonal dragger/slider with physics
TypeScript JavaScript CSS HTML
Branch: master
Clone or download

Latest commit

Fetching latest commit…
Cannot retrieve the latest commit at this time.

Files

Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
example
src
.babelrc
.editorconfig
.eslintignore
.eslintrc
.gitignore
.travis.yml
README.md
example.gif
package.json
rollup.config.js
tsconfig.json
tsconfig.test.json
yarn.lock

README.md

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 (
    <Dragger
      className="dragger" // Pass in whatever classNames or styles you'd like
    >
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </Dragger>
  )
}

Props

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

Acknowledgements

Inspired by Dave DeSandro's work on Practical UI Physics; https://www.youtube.com/watch?v=90oMnMFozEE and https://codepen.io/desandro/pen/QbPKEq

This library was packaged with https://github.com/transitive-bullshit/create-react-library

License

MIT © nickmcmillan

You can’t perform that action at this time.