added and upgraded dev plugins, upgraded to webpack to v4, upgraded p…

…apaparse to v5

.eslintrc.json

@@ -1,12 +1,13 @@
 {
-  "extends": ["react-app", "prettier"],
+  "extends": ["react-app", "prettier", "prettier/react"],
   "plugins": ["prettier"],
   "rules": {
     "prettier/prettier": [
       "warn",
       {
+        "printWidth": 120,
         "singleQuote": true,
-        "trailingComma": "none"
+        "trailingComma": "all"
       }
     ]
   }

.prettierrc.json

@@ -0,0 +1,20 @@
+{
+  "printWidth": 120,
+  "singleQuote": true,
+  "trailingComma": "all",
+  "semi": false,
+  "overrides": [
+    {
+      "files": ["*.css", "*.scss"],
+      "options": {
+        "tabWidth": 4
+      }
+    },
+    {
+      "files": "*.json",
+      "options": {
+        "printWidth": 200
+      }
+    }
+  ]
+}

README.md

@@ -28,6 +28,8 @@ npm install --save react-csv-reader
 
 ## Usage
 
+Basic usage:
+
 ```javascript
 import React, { Component } from 'react'
 import ReactDOM from 'react-dom'
@@ -36,13 +38,44 @@ import CSVReader from 'react-csv-reader'
 class App extends Component {
   ...
 
+  render() {
+    return (
+      <CSVReader onFileLoaded={data => console.log(data)} />
+    )
+  }
+}
+
+ReactDOM.render(<App />, document.getElementById('root'))
+```
+
+More complex example:
+
+```javascript
+import React, { Component } from 'react'
+import ReactDOM from 'react-dom'
+import CSVReader from 'react-csv-reader'
+
+class App extends Component {
+  ...
+
+  const papaparseOptions = {
+    header: true,
+    dynamicTyping: true,
+    skipEmptyLines: true,
+    transformHeader: header =>
+      header
+        .toLowerCase()
+        .replace(/\W/g, '_')
+  }
+
   render() {
     return (
       <CSVReader
         cssClass="csv-reader-input"
         label="Select CSV with secret Death Star statistics"
         onFileLoaded={this.handleForce}
         onError={this.handleDarkSideForce}
+        parserOptions={papaparseOptions}
         inputId="ObiWan"
         inputStyle={{color: 'red'}}
       />
@@ -67,8 +100,10 @@ ReactDOM.render(<App />, document.getElementById('root'))
 | inputStyle    | object          | `{}`               | Some style to be applied to the `<input>` element.                               |
 | fileEncoding  | string          | `UTF-8`            | Encoding type of the input file                                                  |
 
+
 ### Results
 
 When the file has been loaded, it will be parsed with [PapaParse](https://github.com/mholt/PapaParse) from a CSV formatted text to a matrix.
 That matrix is returned to the parent component with `onFileLoaded` function (it will be passed as an argument).
 The second argument to `onFileLoaded` will be the filename provided
+

package.json

@@ -9,35 +9,34 @@
   "homepage": "https://github.com/nzambello/react-csv-reader#readme",
   "license": "MIT",
   "devDependencies": {
-    "babel-core": "^6.24.1",
-    "babel-loader": "^7.0.0",
-    "babel-preset-env": "^1.5.0",
-    "babel-preset-react": "^6.24.1",
-    "react": "^15.5.4",
-    "react-dom": "^15.5.4",
-    "webpack": "^2.5.1",
-    "husky": "^0.14.3",
-    "lint-staged": "^4.2.3",
-    "prettier": "1.7.4"
+    "@babel/core": "^7.6.4",
+    "@babel/plugin-proposal-class-properties": "^7.5.5",
+    "@babel/preset-env": "^7.6.3",
+    "@babel/preset-react": "^7.6.3",
+    "babel-loader": "^8.0.6",
+    "eslint": "^6.6.0",
+    "eslint-config-prettier": "^6.5.0",
+    "eslint-config-react-app": "^5.0.2",
+    "eslint-plugin-import": "^2.18.2",
+    "eslint-plugin-jsx-a11y": "^6.2.3",
+    "eslint-plugin-prettier": "^3.1.1",
+    "eslint-plugin-react": "^7.16.0",
+    "prettier": "^1.18.2",
+    "react": "^16.11.0",
+    "react-dom": "^16.11.0",
+    "webpack": "^4.41.2",
+    "webpack-cli": "^3.3.10"
   },
   "peerDependencies": {
-    "prop-types": "*",
-    "react": "*",
-    "react-dom": "*"
+    "prop-types": "^15.7.2",
+    "react": "^16.11.0",
+    "react-dom": "^16.11.0"
   },
   "scripts": {
     "build": "webpack -p",
-    "watch": "webpack --watch --progress",
-    "prettier-all": "prettier --write '**/*.{js,json,css}'",
-    "precommit": "lint-staged"
+    "watch": "webpack --watch --progress"
   },
   "dependencies": {
-    "papaparse": "^4.3.6"
-  },
-  "lint-staged": {
-    "*.{js,json,css}": [
-      "prettier --write",
-      "git add"
-    ]
+    "papaparse": "^5.1.0"
   }
 }

src/index.js

@@ -1,6 +1,6 @@
-import React from 'react';
-import { string, func, element, oneOfType } from 'prop-types';
-const PapaParse = require('papaparse/papaparse.min.js');
+import React from 'react'
+import { string, func, element, oneOfType } from 'prop-types'
+import PapaParse from 'papaparse'
 
 const CSVReader = ({
   accept = '.csv, text/csv',
@@ -12,29 +12,27 @@ const CSVReader = ({
   inputId = null,
   inputStyle = {},
   fileEncoding = 'UTF-8',
-  parserOptions = {}
+  parserOptions = {},
 }) => {
-  let fileContent = undefined;
-
   const handleChangeFile = e => {
-    let reader = new FileReader();
+    let reader = new FileReader()
     if (e.target.files.length > 0) {
-      const filename = e.target.files[0].name;
+      const filename = e.target.files[0].name
 
       reader.onload = event => {
         const csvData = PapaParse.parse(
           event.target.result,
           Object.assign(parserOptions, {
             error: onError,
-            encoding: fileEncoding
-          })
-        );
-        onFileLoaded(csvData.data, filename);
-      };
+            encoding: fileEncoding,
+          }),
+        )
+        onFileLoaded(csvData.data, filename)
+      }
 
-      reader.readAsText(e.target.files[0], fileEncoding);
+      reader.readAsText(e.target.files[0], fileEncoding)
     }
-  };
+  }
 
   return (
     <div className={cssClass}>
@@ -48,16 +46,16 @@ const CSVReader = ({
         onChange={e => handleChangeFile(e)}
       />
     </div>
-  );
-};
+  )
+}
 
 CSVReader.propTypes = {
   cssClass: string,
   cssInputClass: string,
   label: oneOfType([string, element]),
   onFileLoaded: func.isRequired,
   onError: func,
-  inputId: string
-};
+  inputId: string,
+}
 
-export default CSVReader;
+export default CSVReader

webpack.config.js

@@ -1,4 +1,4 @@
-var path = require('path');
+var path = require('path')
 
 module.exports = {
   devtool: 'source-map',
@@ -7,29 +7,39 @@ module.exports = {
     filename: 'react-csv-reader.js',
     path: path.resolve(__dirname, 'dist'),
     library: 'CSVReader',
-    libraryTarget: 'commonjs2'
+    libraryTarget: 'commonjs2',
   },
   module: {
     rules: [
       {
-        test: /\.js$/,
+        test: /\.m?js$/,
         exclude: /node_modules/,
-        loader: 'babel-loader'
-      }
-    ]
+        use: {
+          loader: 'babel-loader',
+          options: {
+            presets: ['@babel/preset-env', '@babel/preset-react'],
+            plugins: ['@babel/plugin-proposal-class-properties'],
+          },
+        },
+      },
+      {
+        test: /\.styl$/,
+        loader: 'style-loader!css-loader!stylus-loader',
+      },
+    ],
   },
   externals: {
     react: {
       commonjs: 'react',
       commonjs2: 'react',
       amd: 'react',
-      root: 'React'
+      root: 'React',
     },
     'prop-types': {
       commonjs: 'prop-types',
       commonjs2: 'prop-types',
       amd: 'prop-types',
-      root: 'PropTypes'
-    }
-  }
-};
+      root: 'PropTypes',
+    },
+  },
+}