DEV Community

Abdur Rahman
Abdur Rahman

Posted on

Add swipe-able button in React

Image description

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">
                  onSuccess={onSuccess} //callback function
                  text="Swipe me!" //string 
                  text_unlocked="yeee" //string
                  color="#16362d" //css hex color

export default App;
Enter fullscreen mode Exit fullscreen mode
  • 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.9, last published: 42 minutes 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.


Top comments (0)