Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
react-file-drop
Advanced tools
react-file-drop - npm Package Compare versions
Comparing version 0.1.9 to 0.2.0
121
package.json
| { | ||
| "name": "react-file-drop", | ||
| "author": "Kabir Sarin", | ||
| "version": "0.1.9", | ||
| "description": "", | ||
| "main": "./FileDrop", | ||
| "keywords": [ | ||
| "react file gmail", | ||
| "react file facebook", | ||
| "react", | ||
| "react-file-drop", | ||
| "file", | ||
| "gmail", | ||
| "facebook", | ||
| "dropzone", | ||
| "upload", | ||
| "drag", | ||
| "drop", | ||
| "drag and drop", | ||
| "drag n drop", | ||
| "react file upload", | ||
| "react file drag drop", | ||
| "react dropzone", | ||
| "window", | ||
| "document" | ||
| ], | ||
| "repository": { | ||
| "type": "git", | ||
| "url": "git+https://github.com/sarink/react-file-drop.git" | ||
| }, | ||
| "license": "MIT", | ||
| "bugs": { | ||
| "url": "https://github.com/sarink/react-file-drop/issues" | ||
| }, | ||
| "homepage": "https://github.com/sarink/react-file-drop#readme", | ||
| "dependencies": { | ||
| "create-react-class": "^15.5.2", | ||
| "prop-types": "^15.5.8" | ||
| }, | ||
| "peerDependencies": { | ||
| "react": ">=0.13" | ||
| }, | ||
| "devDependencies": { | ||
| }, | ||
| "directories": { | ||
| } | ||
| "name": "react-file-drop", | ||
| "author": "https://sarink.net", | ||
| "version": "0.2.0", | ||
| "description": "React component for Gmail or Facbook -like drag and drop file uploader. Drag files anywhere onto the window to highlight a 'drop area' of the page", | ||
| "main": "dist/FileDrop.bundle.js", | ||
| "scripts": { | ||
| "start:dev": "webpack-dev-server", | ||
| "build:prod": "NODE_ENV=production webpack -p", | ||
| "lint": "tslint --project .", | ||
| "lint:watch": "SHELL=/bin/bash chokidar webpack.config.* tslint.json tsconfig.json ./**/*.ts ./**/*.tsx -c \"npm run lint\" --initial --verbose", | ||
| "lint:fix": "tslint --project . --fix" | ||
| }, | ||
| "keywords": [ | ||
| "react file gmail", | ||
| "react file facebook", | ||
| "react file upload", | ||
| "react file drag drop", | ||
| "react", | ||
| "react dropzone", | ||
| "react-file-drop", | ||
| "gmail", | ||
| "facebook", | ||
| "dropzone", | ||
| "upload", | ||
| "drag", | ||
| "drop", | ||
| "drag and drop", | ||
| "drag n drop", | ||
| "file", | ||
| "window", | ||
| "document" | ||
| ], | ||
| "repository": { | ||
| "type": "git", | ||
| "url": "git+https://github.com/sarink/react-file-drop.git" | ||
| }, | ||
| "license": "MIT", | ||
| "bugs": { | ||
| "url": "https://github.com/sarink/react-file-drop/issues" | ||
| }, | ||
| "homepage": "https://github.com/sarink/react-file-drop#readme", | ||
| "dependencies": { | ||
| "prop-types": "^15.6.1" | ||
| }, | ||
| "peerDependencies": { | ||
| "react": "^16.3.1", | ||
| "react-dom": "^16.3.1" | ||
| }, | ||
| "devDependencies": { | ||
| "@types/node": "^8.0.53", | ||
| "@types/prop-types": "^15.5.2", | ||
| "@types/react": "^16.0.25", | ||
| "@types/react-dom": "^16.0.3", | ||
| "@types/react-hot-loader": "^3.0.6", | ||
| "@types/webpack": "^3.8.1", | ||
| "@types/webpack-dev-server": "^2.9.2", | ||
| "babel-core": "^6.26.0", | ||
| "babel-loader": "^7.1.2", | ||
| "chokidar": "^1.7.0", | ||
| "chokidar-cli": "^1.2.0", | ||
| "clean-webpack-plugin": "^0.1.19", | ||
| "css-loader": "^0.28.7", | ||
| "extract-text-webpack-plugin": "^3.0.2", | ||
| "html-webpack-plugin": "^3.2.0", | ||
| "react": "^16.3.1", | ||
| "react-dom": "^16.3.1", | ||
| "react-hot-loader": "^4.0.1", | ||
| "source-map-loader": "^0.2.3", | ||
| "style-loader": "^0.19.0", | ||
| "ts-loader": "^3.2.0", | ||
| "tslint": "^5.8.0", | ||
| "tslint-config-airbnb": "^5.4.2", | ||
| "typescript": "^2.6.2", | ||
| "webpack": "^3.8.1", | ||
| "webpack-dev-server": "^2.9.4" | ||
| } | ||
| } |
| # react-file-drop | ||
| React component for Gmail or Facbook -like drag and drop file uploader. Drag files anywhere onto the window (or user defined "frame" prop)! Very extensible, provides many hooks so you can use it to develop any custom behavior that you desire. | ||
| React component for Gmail or Facebook -like drag and drop file uploader. Drag files anywhere onto the window (or user defined "frame" prop)! Very extensible, provides many hooks so you can use it to develop any custom behavior that you desire. | ||
| ### By default, there are no styles! You must include some CSS if you want to see anything! | ||
| ## V2 is out! See the [changelog](https://github.com/sarink/react-file-drop/blob/master/CHANGELOG.md) before upgrading | ||
| ## Demo/Example | ||
| There's a very simple demo with example code and CSS available [here](http://sarink.github.io/react-file-drop/demo/). | ||
| http://sarink.github.io/react-file-drop/dist/demo.html - A very simple demo with example code and sample CSS | ||
| If this doesn't look very fancy, it's because it's not meant to! You are encouraged to style it yourself. You can steal [the CSS](http://sarink.github.io/react-file-drop/demo/file-drop.css) from the demo site as a base to go off of if you wish, but by default there are no styles included, you get just a react component. | ||
| ## By default, there are no styles! You must include some CSS if you want to see anything! | ||
| You can grab the [demo CSS](http://sarink.github.io/react-file-drop/demo.css) to get started | ||
| ## Installation | ||
| * As an npm module: ``npm install react-file-drop`` | ||
| * Stand-alone: [download the source](https://raw.githubusercontent.com/sarink/react-file-drop/master/FileDrop.js) | ||
| ## Browser support | ||
| ✅ Chrome <br/> | ||
| ✅ Firefox <br/> | ||
| ✅ Safari <br/> | ||
| ✅ IE 11 <br/> | ||
| ✅ IE Edge <br/> | ||
| ## Typescript? | ||
| Yup! (For typing event handlers, use the native DragEvent for frame handlers, and the React lib's DragEvent for others) | ||
| ## Why? | ||
| I wanted that behavior like facebook, gmail, etc. have where a part of the page highlights immediately when you start dragging a file anywhere on the window. I couldn't find any React component that already did this, so, I made one. | ||
| ## Installation | ||
| ``npm install react-file-drop`` | ||
| ## Usage | ||
| * As a module: ``var FileDrop = require("react-file-drop");`` | ||
| * Stand-alone: ``window.ReactFileDrop`` | ||
| ``import FileDrop from 'react-file-drop`` | ||
@@ -38,3 +48,4 @@ ## How it works | ||
| ##### dropEffect - String "copy" || "move" || "link" || "none" (default: "copy") | ||
| Learn more about [HTML5 dropEffects](https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer#dropEffect.28.29) | ||
| Learn more about [HTML5 dropEffects](https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer#dropEffect.28.29) <br/> | ||
| Not available in IE :( | ||
@@ -44,3 +55,3 @@ ##### targetAlwaysVisible - Boolean (default: false) | ||
| ##### frame - document || window || HTMLElement (default: document) | ||
| ##### frame - document || HTMLElement (default: document) | ||
| This is the "scope" or frame that the user must drag some file(s) over to kick things off. | ||
@@ -58,3 +69,3 @@ | ||
| ## Styling | ||
| By default, the component comes with no styles. You can grab the [demo CSS](http://sarink.github.io/react-file-drop/demo/file-drop.css) to get you started. | ||
| By default, the component comes with no styles. You can grab the [demo CSS](http://sarink.github.io/react-file-drop/demo.css) to get you started. | ||
@@ -64,3 +75,3 @@ ##### .file-drop | ||
| ##### .file-drop > file-drop-target | ||
| ##### .file-drop > .file-drop-target | ||
| This is the target the user has to drag their files to. It will be inserted into the DOM whenever the user starts dragging over the frame, or if you set ``targetAlwaysVisible={true}`` | ||
@@ -67,0 +78,0 @@ |
Sorry, the diff of this file is not supported yet
New alerts
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
Major refactor
Supply chain riskPackage 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
Environment variable access
Supply chain riskPackage accesses environment variables, which may be a sign of credential stuffing or data theft.
Found 2 instances in 1 package
Filesystem access
Supply chain riskAccesses the file system, and could potentially read sensitive data.
Found 1 instance in 1 package
Fixed alerts
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
Improved metrics
- Total package byte prevSize
- increased by807%
154942
- Number of package files
- increased by200%
18
- Lines of code
- increased by288.24%
858
- Number of lines in readme file
- increased by15.94%
80
Worsened metrics
- Dev dependency count
- increased byInfinity%
26
- Number of low supply chain risk alerts
- increased byInfinity%
4
- Number of medium supply chain risk alerts
- increased byInfinity%
1
Dependency changes
+ Addedreact@16.14.0(transitive)
+ Addedreact-dom@16.14.0(transitive)
+ Addedscheduler@0.19.1(transitive)
- Removedcreate-react-class@^15.5.2
- Removedcreate-react-class@15.7.0(transitive)
- Removedreact@18.3.1(transitive)
Updatedprop-types@^15.6.1