# react-slide-button > Custom react slide button for both desktop and mobile. Latest version **2.0.0** (published 2022-11-05) · ISC license · 310 weekly downloads ## Install ```sh npm install react-slide-button pnpm add react-slide-button yarn add react-slide-button bun add react-slide-button ``` ## Health **Score 25/100 (F)** — status: abandoned. Positive: has types; no vulnerabilities; high quality score. Warnings: low downloads; no esm support. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 2.0.0 | | Published | 2022-11-05 | | First published | 2022-09-06 | | Weekly downloads | 310 | | License | ISC | | TypeScript types | bundled | | Module format | CommonJS | | Dependencies | 4 | | Unpacked size | 21.8 KB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 6 | | Author | Abdul Rehman | | Maintainers | arehman01 | | Keywords | react-slide-button, react, swipe-button, swipe, button, slide, swipe, button, slide-button, slide, button, swipezor, slide-button, button, npm slide button, react-slide-button npm, npm react-slide-button, react-slide-button component, npm swipe button, react-swipe-button npm, npm react-swipe-button, react-swipe-button component | ## Links - npm: https://www.npmjs.com/package/react-slide-button - Repository: https://github.com/A-Rehman01/react-slide-button - Issues: https://github.com/A-Rehman01/react-slide-button/issues - npm.io page: https://npm.io/package/react-slide-button ## Dependencies (4) - [react](https://npm.io/package/react.md) ^18.2.0 - [webpack](https://npm.io/package/webpack.md) ^5.74.0 - [react-dom](https://npm.io/package/react-dom.md) ^18.2.0 - [react-swipeable](https://npm.io/package/react-swipeable.md) ^7.0.0 ## Alternatives - [adhdev](https://npm.io/package/adhdev.md) — 11.1K weekly downloads - [better](https://npm.io/package/better.md) — 42 weekly downloads - [react-native-swipe-image](https://npm.io/package/react-native-swipe-image.md) — 22 weekly downloads - [nl.fokkezb.pulltorefresh](https://npm.io/package/nl.fokkezb.pulltorefresh.md) — 11 weekly downloads - [tade-sh](https://npm.io/package/tade-sh.md) — 0 weekly downloads ## Recent versions - 2.0.0 (latest) — 2022-11-05 - 1.0.2 — 2022-09-06 - 1.0.1 — 2022-09-06 - 1.0.0 — 2022-09-06 ## README # react-slide-button Custom react slide button for both desktop and mobile. This button uses [react-swipeable](https://github.com/FormidableLabs/react-swipeable) to detect the swipe action.
demo.gif
## Installation ```bash npm install --save react-slide-button ``` or ```bash yarn add react-slide-button ``` ## Demo / Example [Click here](https://react-slide-button-v2.surge.sh/) ## Options | Key | Type | Default | Description | | ---------------- | ------------------------ | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | mainText | `string` \| `react node` | | Element that appears on button | | overlayText | `string` \| `react node` | | Element that appears on slide overlay | | onSlideDone | `function` | | Callback that gets called when the button is slide complete | | reset | `integer` | | If this value changes, the button is reset to initial state, i.e., non-slide state. | | caret | `string` \| `react node` | | Element to serve as new caret, default is an image of arrow. | | customCaretWidth | `integer` | 40 | Caret Width. | | classList | `string` | '' | Class names that gets appended to main button element | | overlayClassList | `string` | '' | Class names that gets appended to overlay element | | caretClassList | `string` | '' | Class names that gets appended to caret element | | delta | `integer` | 10 | Minimum distance to slide before swiping animation starts | | minSlideWidth | `float` | 0.6 | Minimum width that a user needs to slide till to change the button state to slide state. Value ranges from `0-1`. For example, `0.6` means user needs to slide atleast till 60% of total width of button to set it to slide state. | | minSlideVelocity | `float` | 0.6 | Other way to change button state to slide is to slide it quickly. If the slide velocity is above this value then button is set to slide state. | **Note**: Even if user slides to lesser distance than the one specified by `minSlideWidth` option, if his slide velocity is above `minSlideVelocity` the button state will be changed to slide. --- ### Development Firstly move on the Package Folder. ```bash cd package ``` then install the dependencies with `npm install` or `yarn install`. Now , use the following command to create a link locally, which is to be used in example project, using the following command ```bash npm link ``` Now start the automatic rebuild for hot reloading purpose using the command: ```bash npm start ``` Keep this terminal opened and move onto next step. Now you need to start the example project, to do this make sure your current directory is `/example`, install its dependencies too using `npm install` or `yarn install` command. Now link react-slide-button to the example project using the command: ```bash npm link react-slide-button ``` Now you can start the example project by running the command: ``` npm start ``` Now you are ready to make changes to `/src/index.js` file. --- _Source: https://npm.io/package/react-slide-button · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._