Skip to content
master
Switch branches/tags
Go to file
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

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

About

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

Resources

Releases

No releases published

Packages

No packages published

Contributors 4

  •  
  •  
  •  
  •