react-dragger
Advanced tools
Comparing version 0.0.1 to 1.0.0
{ | ||
"name": "react-dragger", | ||
"version": "0.0.1", | ||
"version": "1.0.0", | ||
"description": "Simple React Dragger component", | ||
@@ -10,3 +10,4 @@ "main": "dist/index.min.js", | ||
"scripts": { | ||
"build": "npm run build:clean && npm run build:dist && npm run build:flow && npm run build:minify", | ||
"install:example": "cd example/app && npm install", | ||
"build": "npm run build:clean && cross-env NODE_ENV=production npm run build:dist && npm run build:flow && npm run build:minify", | ||
"build:clean": "rimraf dist", | ||
@@ -49,5 +50,5 @@ "build:dist": "babel -d dist src --ignore '**/__tests__/**'", | ||
"homepage": "https://github.com/aurbano/react-dragger#readme", | ||
"dependencies": { | ||
"prop-types": "^15.5.10", | ||
"react": "^15.6.1" | ||
"peerDependencies": { | ||
"prop-types": "^15.0", | ||
"react": "^^15.0.0-rc || ^15.0" | ||
}, | ||
@@ -59,3 +60,7 @@ "devDependencies": { | ||
"babel-plugin-dynamic-import-node": "^1.0.2", | ||
"babel-plugin-transform-es2015-modules-commonjs": "^6.24.1", | ||
"babel-plugin-transform-flow-strip-types": "^6.22.0", | ||
"babel-plugin-transform-react-constant-elements": "^6.23.0", | ||
"babel-plugin-transform-react-inline-elements": "^6.22.0", | ||
"babel-plugin-transform-react-remove-prop-types": "^0.4.6", | ||
"babel-polyfill": "^6.23.0", | ||
@@ -88,3 +93,3 @@ "babel-preset-es2015": "^6.24.1", | ||
"pre-commit": "^1.2.2", | ||
"react-component-gulp-tasks": "^0.7.7", | ||
"react": "^15.6.1", | ||
"react-dom": "^15.6.1", | ||
@@ -114,5 +119,9 @@ "react-test-renderer": "^15.6.1", | ||
"env": { | ||
"build": { | ||
"production": { | ||
"plugins": [ | ||
"transform-flow-strip-types" | ||
"transform-es2015-modules-commonjs", | ||
"transform-flow-strip-types", | ||
"transform-react-remove-prop-types", | ||
"transform-react-constant-elements", | ||
"transform-react-inline-elements" | ||
] | ||
@@ -119,0 +128,0 @@ }, |
155
README.md
@@ -1,2 +0,153 @@ | ||
# react-dragger | ||
Tiny React Dragging library (mobile ready) | ||
# React Dragger | ||
> Tiny React Dragging library - mobile ready and with no dependencies! | ||
[![Travis](https://img.shields.io/travis/aurbano/react-dragger.svg)](https://travis-ci.org/aurbano/react-dragger) | ||
[![npm](https://img.shields.io/npm/v/react-dragger.svg)](https://www.npmjs.com/package/react-dragger) | ||
[![Coverage Status](https://coveralls.io/repos/github/aurbano/react-dragger/badge.svg?branch=master)](https://coveralls.io/github/aurbano/react-dragger?branch=master) | ||
[![npm](https://img.shields.io/npm/dm/react-dragger.svg)](https://www.npmjs.com/package/react-dragger) | ||
[![npm](https://img.shields.io/npm/l/react-dragger.svg)](https://www.npmjs.com/package/react-dragger) | ||
[![Codacy grade](https://img.shields.io/codacy/grade/e2589a609bdc4c56bd49c232a65dab4e.svg)](https://www.codacy.com/app/aurbano/react-dragger) | ||
I wrote this library because I couldn't find any existing one to make elements draggable super easily, ignoring where they are dropped. | ||
In some cases you really need an unobtrusive way to make items draggable, this will do just that. | ||
I use React-DnD a lot as well, but sometimes you really just want to make an element draggable. | ||
## Installation | ||
```console | ||
$ npm i react-dragger | ||
``` | ||
Or if you prefer yarn | ||
```console | ||
$ yarn add react-dragger | ||
``` | ||
## Usage | ||
```jsx | ||
<Dragger | ||
target={ this.state.ref } | ||
onStart={ this.onStart } | ||
onDrag={ this.onDrag } | ||
onEnd={ this.onEnd } | ||
position={ this.state.itemLocation } | ||
inverted={ this.props.inverted } | ||
/> | ||
``` | ||
### Props | ||
Docs on each prop, see them in action in the example below. | ||
#### `target` | ||
Element that will be draggable. This is to scope the mouse/touch event handlers and make sure that it doesn't affect your whole web app. | ||
It must be a React `ref`, it should also exist, so you may want to check if it's already initialized before rendering the `Dragger` component. | ||
#### `onStart` | ||
This will be fired when the element starts being dragged. | ||
#### `onDrag` | ||
This will be fired while the element is being dragged. It will receive an object with the `top` and `left` coordinates of the element. | ||
```js | ||
onDrag({ | ||
top: number, | ||
left: number, | ||
}); | ||
``` | ||
#### `onEnd` | ||
This will be fired when the element stops being dragged. | ||
#### `inverted` *(Optional)* | ||
Whether you want the dragging to be inverted (drag mouse up -> element goes down) | ||
## Example | ||
This example was taken from [`example/app/src/Example.js`](https://github.com/aurbano/react-dragger/blob/master/example/app/src/Example.js) which you can see running at https://aurbano.eu/react-dragger/ | ||
```jsx | ||
import React from 'react'; | ||
import Dragger from 'react-dragger'; | ||
import './react-dragger.css'; | ||
export default class Example extends React.PureComponent { | ||
constructor() { | ||
super(); | ||
this.state = { | ||
ref: null, | ||
dragState: 'waiting', | ||
itemLocation: { | ||
top: 10, | ||
left: 260, | ||
}, | ||
}; | ||
} | ||
onStart = () => { | ||
this.setState({ | ||
dragState: 'started', | ||
}); | ||
}; | ||
onDrag = (itemLocation) => { | ||
this.setState({ | ||
dragState: 'dragging', | ||
itemLocation, | ||
}); | ||
}; | ||
onEnd = () => { | ||
this.setState({ | ||
dragState: 'ended', | ||
}); | ||
}; | ||
render() { | ||
const itemStyle = { | ||
...this.state.itemLocation, | ||
}; | ||
return ( | ||
<div style={ { position: 'relative', marginBottom: '10em' } }> | ||
<p>State: <code>{ this.state.dragState }</code></p> | ||
<div className='item' ref={ (ref) => this.setState({ ref }) } style={ itemStyle }> | ||
Drag me! | ||
</div> | ||
{ this.state.ref && ( | ||
<Dragger | ||
target={ this.state.ref } | ||
onStart={ this.onStart } | ||
onDrag={ this.onDrag } | ||
onEnd={ this.onEnd } | ||
position={ this.state.itemLocation } | ||
inverted={ this.props.inverted } | ||
/> | ||
) } | ||
</div> | ||
); | ||
} | ||
} | ||
``` | ||
## Contributing | ||
Only edit the files in the `src` folder. I'll update `dist` manually before publishing new versions to npm. | ||
To run the tests simply run `npm test`. Add tests as you see fit to the `test` folder, they must be called `{string}.test.js`. | ||
## Meta | ||
Copyright © [Alejandro U. Alvarez](https:/aurbano.eu) 2017. MIT Licensed. |
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Minified code
QualityThis package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Empty package
Supply chain riskPackage does not contain any code. It may be removed, is name squatting, or the result of a faulty package publish.
Found 1 instance in 1 package
No v1
QualityPackage is not semver >=1. This means it is not stable and does not support ^ ranges.
Found 1 instance in 1 package
24970
6
170
154
0
42
- Removedprop-types@^15.5.10
- Removedreact@^15.6.1