Custom react slide button for both desktop and mobile. This button uses react-swipeable to detect the swipe action.
npm install --save react-slide-button
yarn add react-slide-button
Demo / Example
||Element that appears on button|
||Element that appears on slide overlay|
||Callback that gets called when the button is slide complete|
||If this value changes, the button is reset to initial state, i.e., non-slide state.|
||Element to serve as new caret, default is an image of arrow.|
||”||Class names that gets appended to main button element|
||”||Class names that gets appended to overlay element|
||”||Class names that gets appended to caret element|
||10||Minimum distance to slide before swiping animation starts|
||0.6||Minimum width that a user needs to slide till to change the button state to slide state. Value ranges from
||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.
Firstly move on the Package Folder.
then install the dependencies with
npm install or
Now , use the following command to create a link locally, which is to be used in example project, using the following command
Now start the automatic rebuild for hot reloading purpose using the command:
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:
Now you are ready to make changes to