diff --git a/README.md b/README.md index 01ae488..1f0f93d 100644 --- a/README.md +++ b/README.md @@ -14,7 +14,7 @@ ## 📜 About -**react-component-form** is a lightweight form component for [React.js](https://reactjs.org/), it allows you to get the inputs values without state with onChange or onSubmit props. +**react-component-form** is a lightweight form component for [React.js](https://reactjs.org/), it allows you to get the inputs values without state thanks to `onChange` or `onSubmit` props. Demo : [https://divlo.github.io/react-component-form/](https://divlo.github.io/react-component-form/). @@ -45,12 +45,14 @@ const Example = () => { } ``` +_Note : The example use TypeScript, but obviously you can use JavaScript. Be aware that `HandleForm` is the type definition for the `onChange` and `onSubmit` props._ + Basically you have access to the same props of the HTML `form` tag in React, but the onSubmit and the onChange props are differents. -Instead to get the `event` params you get `formData` and `formElement` : +Instead to get the `event` param you get `formData` and `formElement` params : -- `formData`: It's an object where the keys are the name of your inputs and the current value. Behind the scene, it uses the `FormData` constructor. -- `formElement`: It's the actual HTML form element in the DOM so for example you can access the `.reset()` method on a `HTMLFormElement`. +- `formData`: It's an object where the keys are the name of your inputs and the current value. Behind the scene, it uses the [FormData](https://developer.mozilla.org/docs/Web/API/FormData) constructor. +- `formElement`: It's the actual HTML form element in the DOM so for example you can access the `.reset()` method on a [HTMLFormElement](https://developer.mozilla.org/docs/Web/API/HTMLFormElement). ## 📄 License diff --git a/example/package-lock.json b/example/package-lock.json index 7cbe094..9363cf3 100644 --- a/example/package-lock.json +++ b/example/package-lock.json @@ -20,7 +20,7 @@ } }, "@testing-library/jest-dom": { - "version": "file:https:/registry.npmjs.org/@testing-library/jest-dom/-/jest-dom-4.2.4.tgz", + "version": "file:../node_modules/@testing-library/jest-dom", "integrity": "sha512-j31Bn0rQo12fhCWOUWy9fl7wtqkp7In/YP2p5ZFyRuiiB9Qs3g+hS4gAmDWONbAHcRmVooNJ5eOHQDCOmUFXHg==", "requires": { "@babel/runtime": "^7.5.1", @@ -35,9 +35,9 @@ }, "dependencies": { "@babel/runtime": { - "version": "7.11.0", - "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.11.0.tgz", - "integrity": "sha512-qArkXsjJq7H+T86WrIFV0Fnu/tNOkZ4cgXmjkzAu3b/58D5mFIO8JH/y77t7C9q0OdDRdh9s7Ue5GasYssxtXw==", + "version": "7.11.1", + "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.11.1.tgz", + "integrity": "sha512-nH5y8fLvVl3HAb+ezbgcgwrH8QbClWo8xzkOu7+oyqngo3EVorwpWJQaqXPjGRpfj7mQvsJCl/S8knkfkPWqrw==", "requires": { "regenerator-runtime": "^0.13.4" } @@ -292,7 +292,7 @@ } }, "@testing-library/react": { - "version": "file:https:/registry.npmjs.org/@testing-library/react/-/react-9.5.0.tgz", + "version": "file:../node_modules/@testing-library/react", "integrity": "sha512-di1b+D0p+rfeboHO5W7gTVeZDIK5+maEgstrZbWZSSvxDyfDRkkyBE1AJR5Psd6doNldluXlCWqXriUfqu/9Qg==", "requires": { "@babel/runtime": "^7.8.4", @@ -301,17 +301,17 @@ }, "dependencies": { "@babel/runtime": { - "version": "7.11.0", - "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.11.0.tgz", - "integrity": "sha512-qArkXsjJq7H+T86WrIFV0Fnu/tNOkZ4cgXmjkzAu3b/58D5mFIO8JH/y77t7C9q0OdDRdh9s7Ue5GasYssxtXw==", + "version": "7.11.1", + "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.11.1.tgz", + "integrity": "sha512-nH5y8fLvVl3HAb+ezbgcgwrH8QbClWo8xzkOu7+oyqngo3EVorwpWJQaqXPjGRpfj7mQvsJCl/S8knkfkPWqrw==", "requires": { "regenerator-runtime": "^0.13.4" } }, "@babel/runtime-corejs3": { - "version": "7.11.0", - "resolved": "https://registry.npmjs.org/@babel/runtime-corejs3/-/runtime-corejs3-7.11.0.tgz", - "integrity": "sha512-K0ioacsw8JgzDSPpUiGWokMvLzGvnZPXLrTsJfyHPrFsnp4yoKn+Ap/8NNZgWKZG9o5+qotH8tAa8AXn8gTN5A==", + "version": "7.11.1", + "resolved": "https://registry.npmjs.org/@babel/runtime-corejs3/-/runtime-corejs3-7.11.1.tgz", + "integrity": "sha512-0gB7HCuTwvPxyCMWJTsRqh8muWkWR6U2c/o5x+oTJPR0xzaFl+thzQxHv4kzMkQadRIhe6KW1D/q1yVrjXmsKA==", "requires": { "core-js-pure": "^3.0.0", "regenerator-runtime": "^0.13.4" @@ -612,11 +612,11 @@ } }, "@testing-library/user-event": { - "version": "file:https:/registry.npmjs.org/@testing-library/user-event/-/user-event-7.2.1.tgz", + "version": "file:../node_modules/@testing-library/user-event", "integrity": "sha512-oZ0Ib5I4Z2pUEcoo95cT1cr6slco9WY7yiPpG+RGNkj8YcYgJnM7pXmYmorNOReh8MIGcKSqXyeGjxnr8YiZbA==" }, "@types/jest": { - "version": "file:https:/registry.npmjs.org/@types/jest/-/jest-25.2.3.tgz", + "version": "file:../node_modules/@types/jest", "integrity": "sha512-JXc1nK/tXHiDhV55dvfzqtmP4S3sy3T3ouV2tkViZgxY/zeUkcpQcQPGRlgF4KmWzWW5oiWYSZwtCB+2RsE4Fw==", "requires": { "jest-diff": "^25.2.1", @@ -763,11 +763,11 @@ } }, "@types/node": { - "version": "file:https:/registry.npmjs.org/@types/node/-/node-12.12.53.tgz", + "version": "file:../node_modules/@types/node", "integrity": "sha512-51MYTDTyCziHb70wtGNFRwB4l+5JNvdqzFSkbDvpbftEgVUBEE+T5f7pROhWMp/fxp07oNIEQZd5bbfAH22ohQ==" }, "@types/react": { - "version": "file:https:/registry.npmjs.org/@types/react/-/react-16.9.44.tgz", + "version": "file:../node_modules/@types/react", "integrity": "sha512-BtLoJrXdW8DVZauKP+bY4Kmiq7ubcJq+H/aCpRfvPF7RAT3RwR73Sg8szdc2YasbAlWBDrQ6Q+AFM0KwtQY+WQ==", "requires": { "@types/prop-types": "*", @@ -787,7 +787,7 @@ } }, "@types/react-dom": { - "version": "file:https:/registry.npmjs.org/@types/react-dom/-/react-dom-16.9.8.tgz", + "version": "file:../node_modules/@types/react-dom", "integrity": "sha512-ykkPQ+5nFknnlU6lDd947WbQ6TE3NNzbQAkInC2EKY1qeYdTKp7onFusmYZb+ityzx2YviqT6BXSu+LyWWJwcA==", "requires": { "@types/react": "*" @@ -815,7 +815,7 @@ } }, "react": { - "version": "file:https:/registry.npmjs.org/react/-/react-16.13.1.tgz", + "version": "file:../node_modules/react", "integrity": "sha512-YMZQQq32xHLX0bz5Mnibv1/LHb3Sqzngu7xstSM+vrkE5Kzr9xE0yMByK5kMoTK30YVJE61WfbxIFFvfeDKT1w==", "requires": { "loose-envify": "^1.1.0", @@ -2723,8 +2723,7 @@ "lodash": "^4.17.11", "pretty-format": "^24.0.0", "redent": "^3.0.0" - }, - "dependencies": {} + } }, "@testing-library/react": { "version": "file:https:/registry.npmjs.org/@testing-library/react/-/react-9.5.0.tgz", @@ -2733,8 +2732,7 @@ "@babel/runtime": "^7.8.4", "@testing-library/dom": "^6.15.0", "@types/testing-library__react": "^9.1.2" - }, - "dependencies": {} + } }, "@testing-library/user-event": { "version": "file:https:/registry.npmjs.org/@testing-library/user-event/-/user-event-7.2.1.tgz", @@ -2825,12 +2823,7 @@ }, "@types/jest": { "version": "file:https:/registry.npmjs.org/@types/jest/-/jest-25.2.3.tgz", - "integrity": "sha512-JXc1nK/tXHiDhV55dvfzqtmP4S3sy3T3ouV2tkViZgxY/zeUkcpQcQPGRlgF4KmWzWW5oiWYSZwtCB+2RsE4Fw==", - "requires": { - "jest-diff": "^25.2.1", - "pretty-format": "^25.2.1" - }, - "dependencies": {} + "integrity": "sha512-JXc1nK/tXHiDhV55dvfzqtmP4S3sy3T3ouV2tkViZgxY/zeUkcpQcQPGRlgF4KmWzWW5oiWYSZwtCB+2RsE4Fw==" }, "@types/json-schema": { "version": "7.0.5", @@ -2848,7 +2841,8 @@ "integrity": "sha512-tHq6qdbT9U1IRSGf14CL0pUlULksvY9OZ+5eEgl1N7t+OA3tGvNpxJCzuKQlsNgCVwbAs670L1vcVQi8j9HjnA==" }, "@types/node": { - "version": "file:https:/registry.npmjs.org/@types/node/-/node-12.12.53.tgz", + "version": "12.12.53", + "resolved": false, "integrity": "sha512-51MYTDTyCziHb70wtGNFRwB4l+5JNvdqzFSkbDvpbftEgVUBEE+T5f7pROhWMp/fxp07oNIEQZd5bbfAH22ohQ==" }, "@types/parse-json": { @@ -2867,21 +2861,21 @@ "integrity": "sha512-1HcDas8SEj4z1Wc696tH56G8OlRaH/sqZOynNNB+HF0WOeXPaxTtbYzJY2oEfiUxjSKjhCKr+MvR7dCHcEelug==" }, "@types/react": { - "version": "file:https:/registry.npmjs.org/@types/react/-/react-16.9.44.tgz", + "version": "16.9.44", + "resolved": false, "integrity": "sha512-BtLoJrXdW8DVZauKP+bY4Kmiq7ubcJq+H/aCpRfvPF7RAT3RwR73Sg8szdc2YasbAlWBDrQ6Q+AFM0KwtQY+WQ==", "requires": { "@types/prop-types": "*", "csstype": "^3.0.2" - }, - "dependencies": {} + } }, "@types/react-dom": { - "version": "file:https:/registry.npmjs.org/@types/react-dom/-/react-dom-16.9.8.tgz", + "version": "16.9.8", + "resolved": false, "integrity": "sha512-ykkPQ+5nFknnlU6lDd947WbQ6TE3NNzbQAkInC2EKY1qeYdTKp7onFusmYZb+ityzx2YviqT6BXSu+LyWWJwcA==", "requires": { "@types/react": "*" - }, - "dependencies": {} + } }, "@types/resolve": { "version": "0.0.8", @@ -12516,8 +12510,7 @@ "loose-envify": "^1.1.0", "object-assign": "^4.1.1", "prop-types": "^15.6.2" - }, - "dependencies": {} + } }, "react-app-polyfill": { "version": "1.0.6", @@ -12743,7 +12736,13 @@ }, "react-dom": { "version": "file:https:/registry.npmjs.org/react-dom/-/react-dom-16.13.1.tgz", - "integrity": "sha512-81PIMmVLnCNLO/fFOQxdQkvEq/+Hfpv24XNJfpyZhTRfO0QcmQIF/PgCa1zCOj2w1hrn12MFLyaJ/G0+Mxtfag==" + "integrity": "sha512-81PIMmVLnCNLO/fFOQxdQkvEq/+Hfpv24XNJfpyZhTRfO0QcmQIF/PgCa1zCOj2w1hrn12MFLyaJ/G0+Mxtfag==", + "requires": { + "loose-envify": "^1.1.0", + "object-assign": "^4.1.1", + "prop-types": "^15.6.2", + "scheduler": "^0.19.1" + } }, "react-error-overlay": { "version": "6.0.7", @@ -12757,7 +12756,56 @@ }, "react-scripts": { "version": "file:https:/registry.npmjs.org/react-scripts/-/react-scripts-3.4.1.tgz", - "integrity": "sha512-JpTdi/0Sfd31mZA6Ukx+lq5j1JoKItX7qqEK4OiACjVQletM1P38g49d9/D0yTxp9FrSF+xpJFStkGgKEIRjlQ==" + "integrity": "sha512-JpTdi/0Sfd31mZA6Ukx+lq5j1JoKItX7qqEK4OiACjVQletM1P38g49d9/D0yTxp9FrSF+xpJFStkGgKEIRjlQ==", + "requires": { + "@svgr/webpack": "4.3.3", + "@typescript-eslint/eslint-plugin": "^2.10.0", + "@typescript-eslint/parser": "^2.10.0", + "babel-eslint": "10.1.0", + "babel-jest": "^24.9.0", + "babel-loader": "8.1.0", + "babel-plugin-named-asset-import": "^0.3.6", + "babel-preset-react-app": "^9.1.2", + "camelcase": "^5.3.1", + "case-sensitive-paths-webpack-plugin": "2.3.0", + "css-loader": "3.4.2", + "dotenv": "8.2.0", + "dotenv-expand": "5.1.0", + "eslint": "^6.6.0", + "eslint-config-react-app": "^5.2.1", + "eslint-loader": "3.0.3", + "eslint-plugin-flowtype": "4.6.0", + "eslint-plugin-jsx-a11y": "6.2.3", + "eslint-plugin-react-hooks": "^1.6.1", + "file-loader": "4.3.0", + "fs-extra": "^8.1.0", + "html-webpack-plugin": "4.0.0-beta.11", + "identity-obj-proxy": "3.0.0", + "jest": "24.9.0", + "jest-environment-jsdom-fourteen": "1.0.1", + "jest-resolve": "24.9.0", + "jest-watch-typeahead": "0.4.2", + "mini-css-extract-plugin": "0.9.0", + "optimize-css-assets-webpack-plugin": "5.0.3", + "pnp-webpack-plugin": "1.6.4", + "postcss-flexbugs-fixes": "4.1.0", + "postcss-loader": "3.0.0", + "postcss-normalize": "8.0.1", + "postcss-preset-env": "6.7.0", + "postcss-safe-parser": "4.0.1", + "react-app-polyfill": "^1.0.6", + "react-dev-utils": "^10.2.1", + "resolve-url-loader": "3.1.1", + "sass-loader": "8.0.2", + "style-loader": "0.23.1", + "terser-webpack-plugin": "2.3.5", + "ts-pnp": "1.1.6", + "url-loader": "2.3.0", + "webpack": "4.42.0", + "webpack-dev-server": "3.10.3", + "webpack-manifest-plugin": "2.2.0", + "workbox-webpack-plugin": "4.3.1" + } }, "read-pkg": { "version": "2.0.0", @@ -14981,7 +15029,8 @@ "integrity": "sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c=" }, "typescript": { - "version": "file:https:/registry.npmjs.org/typescript/-/typescript-3.9.7.tgz", + "version": "3.9.7", + "resolved": false, "integrity": "sha512-BLbiRkiBzAwsjut4x/dsibSTB6yWpwT5qWmC2OfuCg3GgVQCSgMs4vEctYPhsaGtd0AeuuHMkjZ2h2WG8MSzRw==" }, "unicode-canonical-property-names-ecmascript": { diff --git a/src/fromEntries.ts b/src/fromEntries.ts new file mode 100644 index 0000000..a9168f5 --- /dev/null +++ b/src/fromEntries.ts @@ -0,0 +1,9 @@ +/*! fromentries. MIT License. Feross Aboukhadijeh */ +export function fromEntries ( + iterable: Iterable +) { + return [...iterable].reduce((object, [key, value]) => { + object[key] = value + return object + }, {}) +} diff --git a/src/index.tsx b/src/index.tsx index 5b6b2fb..3a62d58 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -1,4 +1,5 @@ import React, { useRef } from 'react' +import { fromEntries } from './fromEntries' export interface FormDataObject { [key: string]: FormDataEntryValue @@ -20,7 +21,7 @@ interface FormProps extends ReactFormProps { } const getFormDataObject = (formElement: HTMLFormElement): FormDataObject => { - return Object.fromEntries(new FormData(formElement)) + return fromEntries(new FormData(formElement)) } const Form = (props: FormProps): JSX.Element => { diff --git a/tsconfig.json b/tsconfig.json index ff2b5d6..0cf2749 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -2,6 +2,7 @@ "compilerOptions": { "outDir": "dist", "module": "esnext", + "target": "ES3", "lib": ["dom", "esnext", "DOM.Iterable"], "moduleResolution": "node", "jsx": "react", @@ -15,7 +16,8 @@ "suppressImplicitAnyIndexErrors": true, "noUnusedLocals": true, "noUnusedParameters": true, - "allowSyntheticDefaultImports": true + "allowSyntheticDefaultImports": true, + "downlevelIteration": true }, "include": ["src"], "exclude": ["node_modules", "dist", "example"]