use-swipe-to-dismiss

A simple React hook to dismiss an element by swiping, similar to mobile notifications.

Currently it only dismisses by swiping up, but let me know if you need it to work in a different direction and I can easily make it configurable.

Features

Touch compatible
Exponential resistance to swiping in the opposite direction
Snapback animation when dismiss is not completed
Configure dismiss threshold in px or % of height

Install

npm install --save use-swipe-to-dismiss

Usage

const useSwipeToDismiss = require('use-swipe-to-dismiss')

const AlertComponent = () => {

  const [show, setShow] = useState(true)

  const useSwipeToDismissProps = useSwipeToDismiss({ 
    onDismiss: () => {
      show(false)
    }
  })

  return show
    ? <div {...useSwipeToDismissProps}>Alert!</div>
    : null
}

Options:

{
  // y offset at which onDismiss is fired, in px or % (of height)
  // Default: '50%'
  dismissThreshold?: string | number,

  // dismiss handler
  onDismiss?: () => void,

  // dismiss after animating element off screen
  onDismissEnd?: () => void,

  // time in seconds to animate the element back into place after releasing
  // Default: 0.1
  snapbackDuration?: number,

  // easing function to animate the element back into place after releasing
  // Default: ease-out
  snapbackEasing?: string,
}

Tips

The hook state will not reset on its own, so if the component seems to be dismissed permanently, you may need to force it to re-mount by giving it a key.

Thanks