Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
react-swipe-component
Advanced tools
Readme
Swipe bindings for react. Demo
yarn add react-swipe-component
Or with npm:
npm install react-swipe-component --save
import React from "react"
import ReactDOM from "react-dom"
import {Swipe, Position} from "react-swipe-component"
class Demo extends React.Component<{}, {}>{
render() {
return <Swipe
nodeName="div"
className="test"
onSwipeEnd={this.onSwipeEnd}
onSwipedLeft={this.onSwipeLeftListener}
onSwipedRight={this.onSwipeRightListener}
onSwipedDown={this.onSwipeDownListener}
onSwipedUp={this.onSwipeUpListener}
onSwipe={this.onSwipeListener}>
Demo
</Swipe>
}
onSwipeEnd = () => {
console.log("Swipe Ended")
}
onSwipeLeftListener = () => {
console.log("Swiped left")
}
onSwipeRightListener = () => {
console.log("Swiped right")
}
onSwipeUpListener = () => {
console.log("Swiped Up")
}
onSwipeDownListener = () => {
console.log("Swiped down")
}
onSwipeListener = (p) => {
if (p.x !== 0) {
console.log(`Swipe x: ${p.x}`)
}
if (p.y !== 0) {
console.log(`Swipe y: ${p.y}`)
}
}
}
ReactDOM.render(<Demo/>, document.getElementById("app"))
nodeName
is a string which determines the html element/node that this react component binds its touch events to then returns. The default value is 'div'.
node
is a option if you'd like to pass a node instead of nodeName(e.g. styled-components).
className
is a string which determines the html element/node class.
style
is a object which determines the style for element.
delta
is the amount of px before we start firing events. Also affects how far onSwipedUp, onSwipedRight, onSwipedDown, and onSwipedLeft need to be before they fire events. The default value is 50.
detectMouse
is allow you to turn off swipe listener for mouse event. The default value is true.
detectTouch
is allow you to turn on swipe listener for touch event. The default value is false.
preventDefault
is whether to prevent the browser's touchmove event. Sometimes you would like the target to scroll natively. The default value is false.
stopPropagation
prevents the event from bubbling up the DOM tree, preventing any parent handlers from being notified of the event.
onSwipingUp
, onSwipingRight
, onSwipingDown
, onSwipingLeft
, are called with the event as well as the absolute delta of where the swipe started and where it's currently at. Return distance from starting point.
onSwipedUp
, onSwipedRight
, onSwipedDown
, onSwipedLeft
are called with the event as well as the x distance, + or -, from where the swipe started to where it ended. These only fire at the end of a touch event.
onSwipe
are called when the swipe started. Return distance from starting point [x,y]. One value will be 0. If value is non 0 it means that it's main swipe axis.
onSwipeEnd
are called when the swipe ended.
onTransitionEnd
event is fired when a CSS transition has completed.
interface Props {
nodeName?: string,
node?: React.ReactNode,
className?: string,
style?: Object,
detectTouch?: boolean,
detectMouse?: boolean,
delta: number,
preventDefault?: boolean,
stopPropagation?: boolean,
children?: any,
onSwipe: (p: Position) => void
onSwipingLeft: (x: number) => void,
onSwipingRight: (x: number) => void,
onSwipingUp: (y: number) => void,
onSwipingDown: (y: number) => void,
onSwipedLeft: () => void,
onSwipedRight: () => void,
onSwipedUp: () => void,
onSwipedDown: () => void,
onSwipeEnd: () => void,
onTransitionEnd: () => void,
}
interface Position {
x: number,
y: number,
}
git clone git@github.com:exelban/react-swipe-component.git
cd react-swipe-component
yarn install
yarn build
If You want to test a package on demo page:
cd docs
yarn install
yarn dev
- rewrited library in typescript
- removed eslint
- removed flow
- update all dependencies
- added stopPropagation
- changed returning values structure
- updated example
- updated some dependencies
- removed unnecessary comments
- fixed docs script for build
- updated all dependencies
- added flow types
- added eslint
- added onSwipeEnd to example
- renamed ./lib/Swipe to ./lib/index
- moved to Babel 7 for compiling
- fixed Google Chrome preventDefault error in console
- small fixed with main example
- started using webpack to compile to ES5
- updated dependency
FAQs
Swipe listener for react
The npm package react-swipe-component receives a total of 377 weekly downloads. As such, react-swipe-component popularity was classified as not popular.
We found that react-swipe-component 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
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.