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.
Top comments (0)