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

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;


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.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.

favicon npmjs.com

Image of Datadog

The Future of AI, LLMs, and Observability on Google Cloud

Datadog sat down with Google’s Director of AI to discuss the current and future states of AI, ML, and LLMs on Google Cloud. Discover 7 key insights for technical leaders, covering everything from upskilling teams to observability best practices

Learn More

Top comments (0)

Image of Datadog

Create and maintain end-to-end frontend tests

Learn best practices on creating frontend tests, testing on-premise apps, integrating tests into your CI/CD pipeline, and using Datadog’s testing tunnel.

Download The Guide

👋 Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay