react-swipe-to-dismiss

Swipe to dismiss hook for notifications

Demo

Install via npm

npm install react-swipe-to-dismiss

or

yarn add react-swipe-to-dismiss

Features

• Left and right direction
• Touch support (Desktop and Mobile)

Usage

import { useSwipeToDismiss } from 'react-swipe-to-dismiss';

const MessageItem = () => {
  const ref = useRef();
  useSwipeToDismiss(ref, onDismiss, false, 50, 'right');

  return (
    <div className="Message" ref={ref}>
      Your changes has been saved.
    </div>
  );
}

Props

• onDismiss - function. If a component swiped more than its width then it will be called.
• distanceBeforeDismiss - number. Distance in pixels from where lib will trigger onDismiss
• removeDOM - boolean. Remove from DOM when element reaches distanceBeforeDismiss
• direction - enum(left, right). In which direction user can swipe the element