react-easy-swipe - npm Package Compare versions

Comparing version 0.0.2 to 0.0.3

package.json

 {
   "name": "react-easy-swipe",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "description": "React easy swipe - Easy handler for common touch operations",
@@ -21,2 +21,3 @@ "main": "./lib/index.js",
     "build": "babel src/ --out-dir ./lib",
+    "demo": "webpack",
     "test": "mocha",
@@ -41,2 +42,3 @@ "tdd": "mocha --watch",
     "babel-eslint": "^4.1.6",
+    "babel-loader": "^6.2.1",
     "babel-plugin-transform-es2015-modules-umd": "^6.3.13",
@@ -62,3 +64,4 @@ "babel-preset-es2015": "^6.3.13",
     "react-addons-test-utils": "^0.14.3",
-    "react-dom": "^0.14.3"
+    "react-dom": "^0.14.3",
+    "webpack": "^1.12.10"
   },
@@ -65,0 +68,0 @@ "tags": [

README.md

@@ -1,7 +0,87 @@
-# REACT SWIPE
+# REACT EASY SWIPE
 
-### Generated using react-init
+Add swipe interactions to your react component.
+* Generated using [react-init](https://www.npmjs.com/package/react-init)
 
+## Demo
+[http://leandrowd.github.io/react-easy-swipe/](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.
+
+
+## Instalation
+`npm install react-easy-swipe --save`
+
+
+## Usage
+```javascript
+import React, {Component} from 'react';
+import ReactDOM from 'react-dom';
+import Swipe from './react-swipe';
+
+class MyComponent extends Component {
+  onSwipeStart() {
+    console.log('Start swiping...');
+  }
+
+  onSwipeMove(position) {
+    console.log(`Moved ${position.x} pixels horizontally`);
+    console.log(`Moved ${position.y} pixels vertically`);
+  }
+
+  onSwipeEnd() {
+    console.log('End swiping...');
+  }
+
+  render() {
+    const boxStyle = {
+      width: '100%',
+      height: '300px',
+      border: '1px solid black',
+      background: '#ccc',
+      padding: '20px',
+      fontSize: '3em'
+    };
+
+    return (
+      <Swipe
+        onSwipeStart={this.onSwipeStart}
+        onSwipeMove={this.onSwipeMove}
+        onSwipeEnd={this.onSwipeEnd}>
+          <div style={boxStyle}>Open the console and swipe me</div>
+      </Swipe>
+    );
+  }
+}
+
+ReactDOM.render(<MyComponent/>, document.getElementById('root'));
+
+```
+
+## Properties
+
+```javascript
+{
+  tagName: PropTypes.string,
+  className: PropTypes.string,
+  style: PropTypes.object,
+  children: PropTypes.node,
+  onSwipeUp: PropTypes.func,
+  onSwipeDown: PropTypes.func,
+  onSwipeLeft: PropTypes.func,
+  onSwipeRight: PropTypes.func,
+  onSwipeStart: PropTypes.func,
+  onSwipeMove: PropTypes.func,
+  onSwipeEnd: PropTypes.func
+}
+```
+
+## Contributing
+
+Please, feel free to contribute. You may open a bug, request a feature, submit a pull request or whatever you want!
+
+
 ### TODOs
 - [ ] write tests
 - [ ] write docs

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

717195

increased by4187.91%

Number of package files

24

increased by41.18%

Lines of code

18046

increased by5335.54%

Number of lines in readme file

88

increased by1000%

Worsened metrics

Dev dependency count

26

increased by8.33%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes