https://github.com/chauhan-ankit24/npm-pacakage-slide-button-with-threshold

https://github.com/chauhan-ankit24/npm-pacakage-slide-button-with-threshold

buttons npm-package react-native slider

Last synced: 3 months ago
JSON representation

• Host: GitHub
• URL: https://github.com/chauhan-ankit24/npm-pacakage-slide-button-with-threshold
• Owner: chauhan-ankit24
• Created: 2024-10-12T18:36:49.000Z (4 months ago)
• Default Branch: main
• Last Pushed: 2024-10-15T17:38:28.000Z (3 months ago)
• Last Synced: 2024-10-17T00:47:47.384Z (3 months ago)
• Topics: buttons, npm-package, react-native, slider
• Language: TypeScript
• Homepage: https://www.npmjs.com/package/slide-button-with-threshold
• Size: 1.83 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# React Native Sliding Button

A customizable slide-to-execute button for React Native applications.

![Sliding Button Demo1](./assets/preview1.gif)

![Sliding Button Demo2](./assets/preview2.gif)

## Features

- **Customizable Text**: Set a custom label for the button.

- **Threshold Control**: Define the percentage of the slider width required to trigger the action.

- **Animations**: Enjoy elastic bounce effects and visual feedback when sliding.

- **Gesture Support**: Utilizes gesture handling for smooth user interactions.

## System Design

For insights into the design process and considerations behind this sliding button component, check out this article:

[Understanding System Design for User Interfaces](https://medium.com/swiggydesign/healthy-friction-in-ux-a46c800cb479)

## Installation

You can install the package using npm:

```bash

npm install slide-button-with-threshold

```

Make sure to also install the required peer dependencies if they are not already included in your project:

```bash

npm install react-native-gesture-handler react react-native

```

Additionally, wrap your main application component with `GestureHandlerRootView` to enable gesture handling:

```javascript

import React from "react";

import { GestureHandlerRootView } from "react-native-gesture-handler";

const App = () => {

  return (

    

      {/* Your app components */}

    

  );

};

```

## How to Use the Package

Import the necessary components from React Native and your package. Here's an example of how to implement the sliding button:

```javascript

import React from "react";

import { Alert, SafeAreaView } from "react-native";

import SlideToPayButton from "slide-button-with-threshold";

import { GestureHandlerRootView } from "react-native-gesture-handler";

const App = () => {

  const handleActionComplete = () => {

    Alert.alert("Action completed!");

  };

  return (

    

      

        

      

    

  );

};

export default App;

```

### Props

- **`text`** _(string)_: Custom label for the button (default: "Slide to Execute").

- **`threshold`** _(number)_: Percentage of slider width to reach for action completion (default: `0.7`).

- **`sliderWidth`** _(number)_: Width of the slider (default: `300`).

- **`sliderHeight`** _(number)_: Height of the slider (default: `70`).

- **`thumbWidth`** _(number)_: Width of the draggable thumb (default: 55).

- **`onComplete`** _(function)_: Callback function to be called when the action is completed.

Feel free to customize the props to fit your design requirements!