react-swipeable-button

A component to create swipeable button in react


Keywords
react swipeable button, react swipe button, swipe button, swipeable button, swipeable, swipe, component-library, npm-package, react-components, react-swipeable-button, reactjs, swipeable-button
License
MIT
Install
npm install react-swipeable-button@1.0.10

Documentation

react-swipeable-button

NPM install size npm bundle sizenpm downloads

A npm pacakge for Swipeable button in react

Updates:

  • Typescript Support Added

Install

npm install react-swipeable-button

or

yarn add react-swipeable-button

Demo

react-swipeable-button

Usage

You need to wrap a parent div to set the width, height and background color of the button.

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}
                  text="Swipe me!"
                  text_unlocked="yeee"
                  color="#16362d"
                />
    </div>
  );
}

export default App;

Props

text (Default will be 'SWIPE') The text that will display on the swipe button

text_unlocked (Default will be 'UNLOCKED!') The text that will display on the swipe button

color The color of swipe button

onSuccess The function that will get called when a swipe is success

Contribution

Contributing on this project is always welcome! Just fork, update, push to your respective branch and make a pull request after testing. Make sure to open an issue before contribute.

License

MIT © Abdur Rahman