Merge pull request #53 from nutboltu/fix/react-dependencies

fix: make react and react dom as peer dependencies

Author: nutboltu

.npmignore

@@ -1,11 +1,17 @@
+.github
 .vscode
 .idea
 src/
 docs/
+test/
 README.md
+jest.config.js
 LICENSE
+SECURITY.md
 .babelrc
 .gitignore
 .eslintignore
 .eslintrc
-yarn.lock
+webpack.config.js
+webpack.production.config.js
+yarn.lock

dist/index.min.js

@@ -1,3 +1,3 @@
 module.exports = {
-  setupFilesAfterEnv: ["<rootDir>tests/test.setup.js"]
-}
+  setupFilesAfterEnv: ['<rootDir>tests/test.setup.js'],
+};

jest.config.js

@@ -1,6 +1,6 @@
 {
   "name": "react-search-field",
-  "version": "2.0.0",
+  "version": "2.0.1",
   "description": "This is a simple search field component for react",
   "main": "dist/index.min.js",
   "scripts": {
@@ -25,8 +25,6 @@
   },
   "dependencies": {
     "prop-types": "15.7.2",
-    "react": "16.9.0",
-    "react-dom": "16.9.0",
     "react-github-btn": "1.2.0",
     "typeco": "1.0.0"
   },
@@ -56,6 +54,10 @@
     "webpack-cli": "3.3.9",
     "webpack-dev-server": "3.11.0"
   },
+  "peerDependencies": {
+    "react": "16.9.0",
+    "react-dom": "16.9.0"
+  },
   "author": "Farhad Yasir",
   "license": "MIT"
 }

package.json

@@ -29,7 +29,7 @@ const searchFieldInputStyle = {
   outline: 'none',
   border: 'none',
   fontSize: 14,
-  padding: 10,
+  padding: '0 8px',
   flex: 1,
   color: '#5a5a5a',
   fontWeight: 100,
@@ -87,8 +87,8 @@ const SearchField = ({
   }, [onChange, setValue]);
 
   const onEnterHandler = useCallback((event) => {
-    const isEnterPressed = event.which === ENTER_KEY ||
-      event.keyCode === ENTER_KEY;
+    const isEnterPressed = event.which === ENTER_KEY
+      || event.keyCode === ENTER_KEY;
     if (isEnterPressed && TypeChecker.isFunction(onEnter)) {
       onEnter(event.target.value, event);
     }
@@ -98,7 +98,7 @@ const SearchField = ({
     if (TypeChecker.isFunction(onSearchClick)) {
       onSearchClick(value);
     }
-  }, [onSearchClick]);
+  }, [onSearchClick, value]);
 
   const onBlurHandler = useCallback((event) => {
     if (TypeChecker.isFunction(onBlur)) {

src/components/SearchField.jsx

@@ -1,37 +1,37 @@
-const path = require("path");
-const HtmlWebpackPlugin = require("html-webpack-plugin");
-const CopyWebpackPlugin = require("copy-webpack-plugin");
-const TerserPlugin = require("terser-webpack-plugin");
+const path = require('path');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const CopyWebpackPlugin = require('copy-webpack-plugin');
+const TerserPlugin = require('terser-webpack-plugin');
 
 module.exports = {
-  mode: "development",
-  entry: path.resolve(__dirname, "src/docs/index.jsx"),
+  mode: 'development',
+  entry: path.resolve(__dirname, 'src/docs/index.jsx'),
   output: {
-    filename: "bundle.min.js",
-    path: path.resolve(__dirname, "docs"),
+    filename: 'bundle.min.js',
+    path: path.resolve(__dirname, 'docs'),
   },
   resolve: {
-    extensions: [".js", ".jsx"],
-    modules: [path.resolve(__dirname, "./src"), "node_modules"],
+    extensions: ['.js', '.jsx'],
+    modules: [path.resolve(__dirname, './src'), 'node_modules'],
   },
   module: {
     rules: [
       {
         test: /\.jsx$/,
         exclude: /node_modules/,
         use: {
-          loader: "babel-loader",
+          loader: 'babel-loader',
         },
       },
       {
         test: /\.css$/,
-        use: ["style-loader", "css-loader"],
+        use: ['style-loader', 'css-loader'],
       },
     ],
   },
   devServer: {
-    contentBase: "docs",
-    host: "localhost",
+    contentBase: 'docs',
+    host: 'localhost',
   },
   plugins: [
     new TerserPlugin({
@@ -40,12 +40,12 @@ module.exports = {
       terserOptions: { ecma: 8 },
     }),
     new HtmlWebpackPlugin({
-      template: path.join(__dirname, "src/docs/index.html"),
+      template: path.join(__dirname, 'src/docs/index.html'),
     }),
     new CopyWebpackPlugin({
       patterns: [
         {
-          from: path.join(__dirname, "src/docs/react-search-field.png"),
+          from: path.join(__dirname, 'src/docs/react-search-field.png'),
         },
       ],
     }),

webpack.config.js

@@ -33,8 +33,19 @@ module.exports = {
       terserOptions: { ecma: 8 },
     }),
   ],
-  externals: [
-    'react',
-    'react-dom',
-  ],
+  externals: {
+    // Use external version of React
+    react: {
+      commonjs: 'react',
+      commonjs2: 'react',
+      amd: 'react',
+      root: 'React',
+    },
+    'react-dom': {
+      commonjs: 'react-dom',
+      commonjs2: 'react-dom',
+      amd: 'react-dom',
+      root: 'ReactDOM',
+    },
+  },
 };

webpack.production.config.js

@@ -6828,16 +6828,6 @@ rc@^1.2.7:
     minimist "^1.2.0"
     strip-json-comments "~2.0.1"
 
-[email protected]:
-  version "16.9.0"
-  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.9.0.tgz#5e65527a5e26f22ae3701131bcccaee9fb0d3962"
-  integrity sha512-YFT2rxO9hM70ewk9jq0y6sQk8cL02xm4+IzYBz75CQGlClQQ1Bxq0nhHF6OtSbit+AIahujJgb/CPRibFkMNJQ==
-  dependencies:
-    loose-envify "^1.1.0"
-    object-assign "^4.1.1"
-    prop-types "^15.6.2"
-    scheduler "^0.15.0"
-
 [email protected]:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/react-github-btn/-/react-github-btn-1.2.0.tgz#464066f999a77c0eed27980260601b51cbe15614"
@@ -6871,15 +6861,6 @@ react-test-renderer@^16.0.0-0:
     react-is "^16.8.6"
     scheduler "^0.18.0"
 
-[email protected]:
-  version "16.9.0"
-  resolved "https://registry.yarnpkg.com/react/-/react-16.9.0.tgz#40ba2f9af13bc1a38d75dbf2f4359a5185c4f7aa"
-  integrity sha512-+7LQnFBwkiw+BobzOF6N//BdoNw0ouwmSJTEm9cglOOmsg/TMiFHZLe2sEoN5M7LgJTj9oHH0gxklfnQe66S1w==
-  dependencies:
-    loose-envify "^1.1.0"
-    object-assign "^4.1.1"
-    prop-types "^15.6.2"
-
 read-pkg-up@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/read-pkg-up/-/read-pkg-up-2.0.0.tgz#6b72a8048984e0c41e79510fd5e9fa99b3b549be"
@@ -7297,14 +7278,6 @@ sax@^1.2.4:
   resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.4.tgz#2816234e2378bddc4e5354fab5caa895df7100d9"
   integrity sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==
 
-scheduler@^0.15.0:
-  version "0.15.0"
-  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.15.0.tgz#6bfcf80ff850b280fed4aeecc6513bc0b4f17f8e"
-  integrity sha512-xAefmSfN6jqAa7Kuq7LIJY0bwAPG3xlCj0HMEBQk1lxYiDKZscY2xJ5U/61ZTrYbmNQbXa+gc7czPkVo11tnCg==
-  dependencies:
-    loose-envify "^1.1.0"
-    object-assign "^4.1.1"
-
 scheduler@^0.18.0:
   version "0.18.0"
   resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.18.0.tgz#5901ad6659bc1d8f3fdaf36eb7a67b0d6746b1c4"