Introduction

Using react swipeable is easy! Follow the simple steps below:

1. Import useSwipeable hook from react-swipeable
2. Set the swipe handlers you care about
3. Spread the handlers onto an html tag to bind to the events

import { useSwipeable } from 'react-swipeable';

const handlers = useSwipeable({
    onSwiped: (eventData) => console.log("User Swiped!", eventData),
  ...config,
});
return <div {...handlers}> You can swipe here </div>;

Spread handlers onto the element you wish to track swipes on.

Swipe Demo

👆 Swipeable Box 👆

Swipe within this box to test the useSwipeable hook. Open the browser console window to see the event details.

🔮 Which way did you swipe? 🔮