react-files - npm Package Compare versions

Comparing version 3.0.0-alpha.4 to 3.0.0

package.json

 {
   "name": "react-files",
-  "version": "3.0.0-alpha.4",
+  "version": "3.0.0",
   "main": "dist/index.js",
@@ -8,3 +8,3 @@ "description": "A file input (dropzone) management component for React",
     "build": "rm -rf dist && webpack --config config/webpack.build.config.js",
-    "demo": "node demo/server.js",
+    "examples": "node examples/server.js",
     "lint": "git diff HEAD --name-only --diff-filter=ACM | grep '.js$' | xargs node ./node_modules/eslint/bin/eslint.js --quiet",
@@ -11,0 +11,0 @@ "lint-full": "node ./node_modules/eslint/bin/eslint.js .",

README.md

@@ -1,7 +0,7 @@
-react-files
+React Files
 =======================
 
-> A file input (dropzone) management component for React
+A minimal, zero dependency, file input (dropzone) component for React.
 
-## Demo
+If upgrading from version 1 or 2, see the [Upgrading to Version 3](#upgrading-to-version-3) section below.
 
@@ -12,3 +12,3 @@ ![Alt text](/demo.gif?raw=true "Demo")
 
-Install from NPM and include it in your own React build process (using [Browserify](http://browserify.org), [Webpack](http://webpack.github.io/), etc).
+Install using npm or yarn. Requires React 16.8+.
 
@@ -19,70 +19,46 @@ ```bash
 
-## Usage
+## Basic Usage
 
-#### Basic
-
 ```js
 import React from 'react'
-import ReactDOM from 'react-dom'
 import Files from 'react-files'
 
-var FilesDemo = React.createClass({
-  onFilesChange: function (files) {
+const FileDropzone = () => {
+  const handleChange = (files) => {
     console.log(files)
-  },
+  }
 
-  onFilesError: function (error, file) {
+  const handleError = (error, file) => {
     console.log('error code ' + error.code + ': ' + error.message)
-  },
-
-  render: function() {
-    return (
-      <div className="files">
-        <Files
-          className='files-dropzone'
-          onChange={this.onFilesChange}
-          onError={this.onFilesError}
-          accepts={['image/png', '.pdf', 'audio/*']}
-          multiple
-          maxFileSize={10000000}
-          minFileSize={0}
-          clickable
-        >
-          Drop files here or click to upload
-        </Files>
-      </div>
-    )
   }
-})
 
-ReactDOM.render(<FilesDemo />, document.getElementById('container'))
+  return (
+    <div className="files">
+      <Files
+        className='files-dropzone'
+        onChange={handleChange}
+        onError={handleError}
+        accepts={['image/png', '.pdf', 'audio/*']}
+        multiple
+        maxFileSize={10000000}
+        minFileSize={0}
+        clickable>
+        Drop files here or click to upload
+      </Files>
+    </div>
+  )
+}
 ```
 
-#### Advanced
+## Upgrading to Version 3
 
-See "Tinker" instructions below to run and view all examples.
+Most of the changes made to version 3 are internal, but there are some notable and breaking changes:
+1. The most significant change is that `react-files` no longer manages state internally to track files that have been uploaded to a file list. This can be achieved quite simply however - please refer to the [`ListWithUpload` example](https://github.com/mother/react-files/blob/master/examples/ListWithUpload.js).
+2. `dropActiveClassName` prop has been renamed to `dragActiveClassName`.
+2. Removed unnecessary parent/wrapper `div` element. No more default values for `className` or `dragActiveClassName` props.
+3. Ability to pass in a render prop with a prop that indicates whether a drag is in progress. See the [`RenderProps` example](https://github.com/mother/react-files/blob/master/examples/RenderProps.js).
+4. Ability to pass in attributes to underlying input
 
-### Tinker
+For a full list of changes, please checkout the [v3.0.0 release changelog](https://github.com/mother/react-files/releases/tag/v3.0.0) or the [corresponding pull request](https://github.com/mother/react-files/pull/32).
 
-```
-git clone https://github.com/mother/react-files
-npm install
-```
-And since React is just a peer dependency:
-```
-npm install react
-```
-Then:
-```
-npm run demo
-```
-
-Then visit http://localhost:8080/
-
-### Build
-
-```
-npm run build
-```
-
 ## Props
@@ -165,4 +141,2 @@
 
-Default: `'files-dropzone-active'`
-
 Class added to the Files component when user is actively hovering over the dropzone with files selected.
@@ -172,10 +146,21 @@
 
-### Test (todo)
+## Examples
 
+To run the examples locally, clone and install peer dependencies (React 16.8+)
+
 ```
-npm test
+git clone https://github.com/mother/react-files
+npm install
+npm i react react-dom
 ```
 
-### License
+Then run the examples server:
+```
+npm run examples
+```
 
-MIT. Copyright (c) Mother Co. 2020
+Then visit http://localhost:8080/
+
+## License
+
+MIT. Copyright (c) Mother Co. 2023

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

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

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

14102

increased by6.05%

Number of low quality alerts

1

decreased by-50%

Worsened metrics

Number of lines in readme file

163

decreased by-8.43%

No dependency changes