Add swipe-able button in React

Abdur Rahman — Thu, 29 Feb 2024 21:37:55 +0000

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

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

DEV Community: Abdur Rahman

Add swipe-able button in React

react-swipeable-button - npm