npmpackage.info

react-easy-swipe2

Easy handler for common swipe operations

0.0.18

104

MIT

JavaScript

2.25 kB

705 2

Installations

npm install react-easy-swipe2

Pull Requests

Open

1

Total

45

Closed

15

Merged

29

Issues

Open

0

Total

35

Closed

35

Releases

Unable to fetch releases

Contributors

View all 14 contributors

Developer

leandrowd

Developer Guide

BETA

Module System

CommonJS

Min. Node Version

>= 6

Typescript Support

No

Node Version

6.9.5

NPM Version

3.10.10 Statistics

104 Stars

126 Commits

32 Forks

6 Watching

4 Branches

14 Contributors

Updated on 14 May 2024

Bundle Size

6.32 kB

Minified

2.25 kB

Minified + Gzipped

Bundlephobia

Languages

JavaScript (72.4%)

HTML (27.6%)

Total Downloads

Cumulative downloads

Total Downloads

705

Last day

Compared to previous day

Last week

-20%

Compared to previous week

Last month

30.8%

Compared to previous month

Last year

64.1%

151

Compared to previous year

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Versions

REACT EASY SWIPE

Add swipe interactions to your react component.

Generated using react-init

Demo

http://leandrowd.github.io/react-easy-swipe/

Open your console;
Swipe over the content and check your console;
This is a touch component so make sure your browser is emulating touch.

Tips:

To prevent scroll during swipe, return true from the handler passed to onSwipeMove
To allow mouse events to behave like touch, pass a prop allowMouseEvents
To prevent accidental swipes on scroll, pass a prop tolerance with the tolerance pixel as number.

Instalation

npm install react-easy-swipe --save

Usage

1import React, {Component} from 'react';
2import ReactDOM from 'react-dom';
3import Swipe from 'react-easy-swipe';
4
5class MyComponent extends Component {
6  onSwipeStart(event) {
7    console.log('Start swiping...', event);
8  }
9
10  onSwipeMove(position, event) {
11    console.log(`Moved ${position.x} pixels horizontally`, event);
12    console.log(`Moved ${position.y} pixels vertically`, event);
13  }
14
15  onSwipeEnd(event) {
16    console.log('End swiping...', event);
17  }
18
19  render() {
20    const boxStyle = {
21      width: '100%',
22      height: '300px',
23      border: '1px solid black',
24      background: '#ccc',
25      padding: '20px',
26      fontSize: '3em'
27    };
28
29    return (
30      <Swipe
31        onSwipeStart={this.onSwipeStart}
32        onSwipeMove={this.onSwipeMove}
33        onSwipeEnd={this.onSwipeEnd}>
34          <div style={boxStyle}>Open the console and swipe me</div>
35      </Swipe>
36    );
37  }
38}
39
40ReactDOM.render(<MyComponent/>, document.getElementById('root'));
41

Properties

1{
2  tagName: PropTypes.string,
3  className: PropTypes.string,
4  style: PropTypes.object,
5  children: PropTypes.node,
6  allowMouseEvents: PropTypes.bool,
7  onSwipeUp: PropTypes.func,
8  onSwipeDown: PropTypes.func,
9  onSwipeLeft: PropTypes.func,
10  onSwipeRight: PropTypes.func,
11  onSwipeStart: PropTypes.func,
12  onSwipeMove: PropTypes.func,
13  onSwipeEnd: PropTypes.func,
14  tolerance: PropTypes.number.isRequired
15}

Contributing

Please, feel free to contribute. You may open a bug, request a feature, submit a pull request or whatever you want!

License

No vulnerabilities found.

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

10

License

Determines if the project has defined a license.

2

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

0

Maintained

Determines if the project is "actively maintained".

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Security-Policy

Determines if the project has published a security policy.

0

Fuzzing

Determines if the project uses fuzzing.

0

Branch-Protection

Determines if the default and release branches are protected with GitHub's branch protection settings.

0

SAST

Determines if the project uses static code analysis.

0

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

Reason

59 existing vulnerabilities detected

Details

Warn: Project is vulnerable to: GHSA-v88g-cgmw-v5xw
Warn: Project is vulnerable to: GHSA-8w4h-3cm3-2pm2
Warn: Project is vulnerable to: GHSA-67hx-6x53-jw92
Warn: Project is vulnerable to: GHSA-cwfw-4gq5-mrqx
Warn: Project is vulnerable to: GHSA-g95f-p29q-9xw4
Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg
Warn: Project is vulnerable to: GHSA-p28h-cc7q-c4fg
Warn: Project is vulnerable to: GHSA-9vvw-cc9w-f27h
Warn: Project is vulnerable to: GHSA-gxpj-cx7g-858c
Warn: Project is vulnerable to: GHSA-hr2v-3952-633q
Warn: Project is vulnerable to: GHSA-h6ch-v84p-w6p9
Warn: Project is vulnerable to: GHSA-4gmj-3p3h-gm8h
Warn: Project is vulnerable to: GHSA-qrmc-fj45-qfc2
Warn: Project is vulnerable to: GHSA-8r6j-v8pm-fqw3
Warn: Project is vulnerable to: MAL-2023-462
Warn: Project is vulnerable to: GHSA-qh2h-chj9-jffq
Warn: Project is vulnerable to: GHSA-44pw-h2cw-w3vq
Warn: Project is vulnerable to: GHSA-jp4x-w63m-7wgm
Warn: Project is vulnerable to: GHSA-c429-5p7v-vgjp
Warn: Project is vulnerable to: GHSA-2pr6-76vf-7546
Warn: Project is vulnerable to: GHSA-8j8c-7jfh-h6hx
Warn: Project is vulnerable to: GHSA-896r-f27r-55mw
Warn: Project is vulnerable to: GHSA-9c47-m6qq-7p4h
Warn: Project is vulnerable to: GHSA-282f-qqgm-c34q
Warn: Project is vulnerable to: GHSA-76p3-8jx3-jpfq
Warn: Project is vulnerable to: GHSA-jf85-cpcp-j695
Warn: Project is vulnerable to: GHSA-fvqr-27wr-82fm
Warn: Project is vulnerable to: GHSA-4xc9-xhrj-v574
Warn: Project is vulnerable to: GHSA-x5rq-j2xg-h7qm
Warn: Project is vulnerable to: GHSA-p6mc-m468-83gw
Warn: Project is vulnerable to: GHSA-29mw-wpgm-hmr9
Warn: Project is vulnerable to: GHSA-35jh-r3h4-6jhm
Warn: Project is vulnerable to: GHSA-2m96-9w4j-wgv7
Warn: Project is vulnerable to: GHSA-h726-x36v-rx45
Warn: Project is vulnerable to: GHSA-7wpw-2hjm-89gp
Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv
Warn: Project is vulnerable to: GHSA-hxm2-r34f-qmc5
Warn: Project is vulnerable to: GHSA-f8q6-p94x-37v3
Warn: Project is vulnerable to: GHSA-vh95-rmgr-6w4m / GHSA-xvch-5gv4-984h
Warn: Project is vulnerable to: GHSA-w9mr-4mfr-499f
Warn: Project is vulnerable to: GHSA-r683-j2x4-v87g
Warn: Project is vulnerable to: GHSA-rp65-9cf3-cjxr
Warn: Project is vulnerable to: GHSA-6394-6h9h-cfjg
Warn: Project is vulnerable to: GHSA-hj48-42vr-x3v9
Warn: Project is vulnerable to: GHSA-hrpp-h998-j3pp
Warn: Project is vulnerable to: GHSA-6g33-f262-xjp4
Warn: Project is vulnerable to: GHSA-p8p7-x288-28g6
Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw
Warn: Project is vulnerable to: GHSA-4rq4-32rv-6wp6
Warn: Project is vulnerable to: GHSA-64g7-mvw6-v9qj
Warn: Project is vulnerable to: GHSA-2m39-62fm-q8r3
Warn: Project is vulnerable to: GHSA-mf6x-7mm4-x2g7
Warn: Project is vulnerable to: GHSA-3jfq-g458-7qm9
Warn: Project is vulnerable to: GHSA-5955-9wpr-37jh
Warn: Project is vulnerable to: GHSA-f5x3-32g6-xq36
Warn: Project is vulnerable to: GHSA-g7q5-pjjr-gqvp
Warn: Project is vulnerable to: GHSA-72xf-g2v4-qvf3
Warn: Project is vulnerable to: GHSA-xc7v-wxcw-j472
Warn: Project is vulnerable to: GHSA-fhg7-m89q-25r3

Score

2

/10

Last Scanned on 2024-11-18

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.

Learn More

Other packages similar to react-easy-swipe2

react-easy-router

2.2.0

The simplest way to add routing to your React app

react-easy-crop

5.2.0

A React component to crop images/videos with easy interactions

react-easy-swipe

0.0.23

React easy swipe - Easy handler for common touch operations

react-test-renderer

18.3.1

React package for snapshot testing.

react-easy-swipe2

Installations

Pull Requests

1

45

15

29

Issues

0

35

35

Releases

Unable to fetch releases

Contributors

Developer

leandrowd

Developer Guide

CommonJS

>= 6

No

6.9.5

3.10.10

Statistics

Bundle Size

6.32 kB

2.25 kB

Languages

Total Downloads

705

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

Dev Dependencies

REACT EASY SWIPE

Demo

Tips:

Instalation

Usage

Properties

Contributing

License

10

10

2

0

0

0

0

0

0

0

2

/10

Other packages similar to react-easy-swipe2