theoludwig/react-component-form
1
1
Fork 0
mirror of https://github.com/theoludwig/react-component-form.git synced 2024-07-17 07:30:13 +02:00
Code Issues Releases Activity

✨ Add Object.fromEntries() ponyfill

Browse Source
This commit is contained in:
divlo 2020-08-05 02:53:04 +02:00
parent 25aa143110
commit c577509e6f
5 changed files with 108 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
README.md
View File

@ -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

127
example/package-lock.json generated
View File

@ -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": {

9
src/fromEntries.ts Normal file
View File

@ -0,0 +1,9 @@
/*! fromentries. MIT License. Feross Aboukhadijeh <https://feross.org/opensource> */
export function fromEntries<T = any> (
iterable: Iterable<readonly [PropertyKey, T]>
) {
return [...iterable].reduce((object, [key, value]) => {
object[key] = value
return object
}, {})
}

3
src/index.tsx
View File

@ -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<FormDataEntryValue>(new FormData(formElement))
return fromEntries<FormDataEntryValue>(new FormData(formElement))
}
const Form = (props: FormProps): JSX.Element => {

4
tsconfig.json
View File

@ -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"]