Socket
Socket
Sign inDemoInstall

react-slide-button

Package Overview
Dependencies
83
Maintainers
1
Versions
4
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

    react-slide-button

Custom react slide button for both desktop and mobile.


Version published
Weekly downloads
214
decreased by-21.32%
Maintainers
1
Install size
22.0 MB
Created
Weekly downloads
 

Readme

Source

react-slide-button

Custom react slide button for both desktop and mobile. This button uses react-swipeable to detect the swipe action.

demo.gif

Installation

npm install --save react-slide-button

or

yarn add react-slide-button

Demo / Example

Click here

Options

KeyTypeDefaultDescription
mainTextstring | react nodeElement that appears on button
overlayTextstring | react nodeElement that appears on slide overlay
onSlideDonefunctionCallback that gets called when the button is slide complete
resetintegerIf this value changes, the button is reset to initial state, i.e., non-slide state.
caretstring | react nodeElement to serve as new caret, default is an image of arrow.
customCaretWidthinteger40Caret Width.
classListstring''Class names that gets appended to main button element
overlayClassListstring''Class names that gets appended to overlay element
caretClassListstring''Class names that gets appended to caret element
deltainteger10Minimum distance to slide before swiping animation starts
minSlideWidthfloat0.6Minimum 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.
minSlideVelocityfloat0.6Other 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.

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

npm link

Now start the automatic rebuild for hot reloading purpose using the command:

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:

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.

Keywords

FAQs

Last updated on 05 Nov 2022

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc