Security News
The Dark Side of Open Source
At Node Congress, Socket CEO Feross Aboukhadijeh uncovers the darker aspects of open source, where applications that rely heavily on third-party dependencies can be exploited in supply chain attacks.
react-swipezor
Advanced tools
Readme
A beautiful react swipe button compatible with both desktop and mobile. This button uses react-swipeable to detect the swipe action.
npm install --save react-swipezor
or
yarn add react-swipezor
Key | Type | Default | Description |
---|---|---|---|
mainText | string | react node | Element that appears on button | |
overlayText | string | react node | Element that appears on swipe overlay | |
onSwipeDone | function | Callback that gets called when the button is swipped | |
reset | integer | If this value changes, the button is resseted to initial state, i.e., non-swiped state. | |
caret | string | react node | Element to serve as new caret, default is an image of arrow. | |
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 swipe before swiping animation starts |
minSwipeWidth | float | 0.6 | Minimum width that a user needs to swipe till to change the button state to swipped state. Value ranges from 0-1 . For example, 0.6 means user needs to swipe atleast till 60% of total width of button to set it to swiped state. |
minSwipeVelocity | float | 0.6 | Other way to change button state to swiped is to swipe it quickly. If the swipe velocity is above this value then button is set to swiped state. |
Note: Even if user swipes to lesser distance than the one specified by minSwipeWidth
option, if his swipe velocity is above minSwipeVelocity
the button state will be changed to swiped.
Firstly install the dependencies with npm install
or yarn install
.
Now make sure you are in root of the folder, 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-swipezor to the example project using the command:
npm link react-swipezor
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.
FAQs
A beautiful react swipe button compatible with both desktop and mobile.
The npm package react-swipezor receives a total of 123 weekly downloads. As such, react-swipezor popularity was classified as not popular.
We found that react-swipezor demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
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.
Security News
At Node Congress, Socket CEO Feross Aboukhadijeh uncovers the darker aspects of open source, where applications that rely heavily on third-party dependencies can be exploited in supply chain attacks.
Research
Security News
The Socket Research team found this npm package includes code for collecting sensitive developer information, including your operating system username, Git username, and Git email.
Security News
OpenJS is warning of social engineering takeovers targeting open source projects after receiving a credible attempt on the foundation.