react-swipeable-button

A npm package for Swipeable button in react

Changes:

1.6.5

• Storybook improvement

1.6.3 Fixes

• Slider Button vanishes in Storybook sometimes

Improvements

• circle prop is now true by default

v1.6.2

Improvements

• Shimmer Effect enhancement: Enhanced the visibility of the shimmer effect

Fixes

• Removed transition effect as it was causing slide delay
• Disabled animation when the button is disabled

Check all the changes in the Release Notes

Installs

npm install react-swipeable-button

or

yarn add react-swipeable-button

Usage

General Usage

import { SwipeableButton } from "react-swipeable-button";

function App() {
  const onSuccess = () => {
    console.log("Successfully Swiped!");
  };

  const onFailure = () => {
    console.log("Failed to Swipe!");
  };

  return (
    <SwipeableButton
      onSuccess={onSuccess}
      onFailure={onFailure}
      noAnimate={false} //default is false
      text="Swipe me!"
      text_unlocked="yeee"
      sliderTextColor="#fff" //default is #fff
      sliderIconColor="#fff" //default is #fff
      background_color="#eee" //default is #eee
      ...otherProps (check props section for more details)
      name="react-swipeable-button"
    />
  );
}

export default App;

Using ReactNode insead of text

<SwipeableButton
  onSuccess={onSuccess}
  onFailure={onFailure}
  buttonChildren={
    <p style={{ color: "green", textAlign: "center" }}>Click me</p> // instead of text
  }
  buttonChildrenUnlocked={
    <p style={{ color: "red", textAlign: "center" }}>Unlocked!</p> // using instead of text_unlocked
  }
  sliderColor="#16362d"
  sliderTextColor="#fff"
  sliderIconColor="#fff"
  background_color="#eee"
  borderRadius={30}
  circle //default is true
  autoWidth
  disabled={false}
  name="react-swipeable-button"
/>

With Ref : buttonReset and buttonComplete methods

import { useRef } from "react";
import { SwipeableButton } from "react-swipeable-button";

function App() {

  const swipeableButtonRef = useRef<SwipeableButton | null>(null); // Create a ref for the component

  const handleReset = () => {
    swipeableButtonRef.current?.buttonReset(); // Call the reset method
  };

  const handleComplete = () => {
    swipeableButtonRef.current?.buttonComplete(); // Call the complete method
  };
  return (
      <SwipeableButton
        text="Swipe me!"
        text_unlocked="yeee"
        color="16362d"
        sliderTextColor="#fff"
        sliderIconColor="#fff"
        background_color="#eee"
        circle
        name="react-swipeable-button"
        ref={swipeableButtonRef} // Expose the ref to the component
      />
      //example usage of the reset and complete methods
      <button onClick={handleReset}>Reset</button>
      <button onClick={handleComplete}>Complete</button>
    </div>
  );
}

export default App;

Troubleshooting

• If you face trouble with long text, try to increase the width

<SwipeableButton
  text="A long text that doesn't fit in the middle" //long text
  width={500} // increase the width (default is 300)
  ...otherProps
/>

• using buttonChildren and buttonChildrenUnlocked props can be an alternative too though it needs more work ; check props section for more details

Props

| Prop | Type | Default | Description | | ---------------------- | ------------------- | ------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | name | String | "react-swipeable-button" | Unique ID, in case of using several components on one page | | buttonChildren | ReactNode | None | We can pass any react component as children to the button instead of text | | buttonChildrenUnlocked | ReactNode | None | We can pass any react component as children to the button instead of text_unlocked when the button is unlocked (buttonChildren is mandatory when buttonChildrenUnlocked is passed) | | text | String | "SWIPE" | The text that will be displayed on the swipe button (will be overridden by buttonChildren) | | text_unlocked | String | "UNLOCKED!" | The text that will displayed if swiping is successful (will be overridden by buttonChildrenUnlocked) | | color (Depricated) | String | "#333" | Depricated, use sliderColor instead | | sliderColor | String | "#16362d" | The color of the slider | | sliderTextColor | String | "#fff" | The color of the Slider Text | | textColor | String | "#000" | The color of the Text (without slider) | | sliderIconColor | String | "#fff" | The color of the icon | | background_color | String | "#eee" | The background color of the container | | borderRadius | Number | 30 | The border radius of the container lets you control the roundness of the corners (ignored if circle is false) | | noAnimate | Boolean | false | Disable animation | | width | Number | 300 | Width of element (ignored if autoWidth is true) | | height | Number | 50 | Height of element | | autoWidth | Boolean | false | takes 100% width of parent div | | circle | Boolean | true | All parts of component will be with border-radius and rounded handler | | disabled | Boolean | false | Disable interaction with component | | onSuccess | Function (optional) | null | The function that will be called when a swipe is successful | | onFailure | Function (optional) | null | The function that will be called when a swipe is failed |

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