Add swipe-able button in React

So I was struggling to find a right react component library for interactive button that can be swiped both in touch and mouse move.

Although I got a blog and found one react library which is not maintained now and has no support for TypeScript.

Inspired from the library , I polished the code , added latest React and TypeScript support and published as npm package.

Let’s explore the magic!

• We need to install the library package first.

npm install react-swipeable-button

or

yarn add react-swipeable-button

• Now we need to import the ‘SwipeableButton’ component from the ‘react-swipeable-button’ package.

To resize the button, we need to wrap it with a parent div and add CSS properties ( Here, we are using Tailwind).

 import { SwipeableButton } from "react-swipeable-button"; function App() { const onSuccess = () => { console.log("Successfully Swiped!"); }; return ( <div className="w-[500px] h-[100px] bg-white"> <SwipeableButton onSuccess={onSuccess} //callback function text="Swipe me!" //string text_unlocked="yeee" //string color="#16362d" //css hex color /> </div> ); } export default App; 

• The props are optional but you need to use them for comprehensive customizations.

To explore more about the package or for contribution, check the package link below.

react-swipeable-button - npm

A component to create swipeable button in react. Latest version: 1.0.11, last published: 4 months ago. Start using react-swipeable-button in your project by running `npm i react-swipeable-button`. There are no other projects in the npm registry using react-swipeable-button.

npmjs.com