🎉 Initial commit
This commit is contained in:
divlo
commit
00f95feadf
9
.editorconfig
Normal file
9
.editorconfig
Normal file
@ -0,0 +1,9 @@
|
|||||||
|
root = true
|
||||||
|
|
||||||
|
[*]
|
||||||
|
charset = utf-8
|
||||||
|
indent_style = space
|
||||||
|
indent_size = 2
|
||||||
|
end_of_line = lf
|
||||||
|
insert_final_newline = true
|
||||||
|
trim_trailing_whitespace = true
|
||||||
5
.eslintignore
Normal file
5
.eslintignore
Normal file
@ -0,0 +1,5 @@
|
|||||||
|
build/
|
||||||
|
dist/
|
||||||
|
node_modules/
|
||||||
|
.snapshots/
|
||||||
|
*.min.js
|
||||||
34
.eslintrc
Normal file
34
.eslintrc
Normal file
@ -0,0 +1,34 @@
|
|||||||
|
{
|
||||||
|
"parser": "@typescript-eslint/parser",
|
||||||
|
"extends": [
|
||||||
|
"standard",
|
||||||
|
"standard-react",
|
||||||
|
"plugin:prettier/recommended",
|
||||||
|
"prettier/standard",
|
||||||
|
"prettier/react",
|
||||||
|
"plugin:@typescript-eslint/eslint-recommended"
|
||||||
|
],
|
||||||
|
"env": {
|
||||||
|
"node": true
|
||||||
|
},
|
||||||
|
"parserOptions": {
|
||||||
|
"ecmaVersion": 2020,
|
||||||
|
"ecmaFeatures": {
|
||||||
|
"legacyDecorators": true,
|
||||||
|
"jsx": true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"settings": {
|
||||||
|
"react": {
|
||||||
|
"version": "16"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"rules": {
|
||||||
|
"space-before-function-paren": 0,
|
||||||
|
"react/prop-types": 0,
|
||||||
|
"react/jsx-handler-names": 0,
|
||||||
|
"react/jsx-fragments": 0,
|
||||||
|
"react/no-unused-prop-types": 0,
|
||||||
|
"import/export": 0
|
||||||
|
}
|
||||||
|
}
|
||||||
25
.github/workflows/node.js.yml
vendored
Normal file
25
.github/workflows/node.js.yml
vendored
Normal file
@ -0,0 +1,25 @@
|
|||||||
|
name: Node.js CI
|
||||||
|
|
||||||
|
on:
|
||||||
|
push:
|
||||||
|
branches: [master]
|
||||||
|
pull_request:
|
||||||
|
branches: [master]
|
||||||
|
|
||||||
|
jobs:
|
||||||
|
build:
|
||||||
|
runs-on: ubuntu-latest
|
||||||
|
|
||||||
|
strategy:
|
||||||
|
matrix:
|
||||||
|
node-version: [10.x, 12.x, 14.x]
|
||||||
|
|
||||||
|
steps:
|
||||||
|
- uses: actions/checkout@v2
|
||||||
|
- name: Use Node.js ${{ matrix.node-version }}
|
||||||
|
uses: actions/setup-node@v1
|
||||||
|
with:
|
||||||
|
node-version: ${{ matrix.node-version }}
|
||||||
|
- run: npm ci
|
||||||
|
- run: npm run test:build
|
||||||
|
- run: npm run test:lint
|
||||||
21
.gitignore
vendored
Normal file
21
.gitignore
vendored
Normal file
@ -0,0 +1,21 @@
|
|||||||
|
# See https://help.github.com/ignore-files/ for more about ignoring files.
|
||||||
|
|
||||||
|
# dependencies
|
||||||
|
node_modules
|
||||||
|
|
||||||
|
# builds
|
||||||
|
build
|
||||||
|
dist
|
||||||
|
.rpt2_cache
|
||||||
|
|
||||||
|
# misc
|
||||||
|
.DS_Store
|
||||||
|
.env
|
||||||
|
.env.local
|
||||||
|
.env.development.local
|
||||||
|
.env.test.local
|
||||||
|
.env.production.local
|
||||||
|
|
||||||
|
npm-debug.log*
|
||||||
|
yarn-debug.log*
|
||||||
|
yarn-error.log*
|
||||||
10
.prettierrc
Normal file
10
.prettierrc
Normal file
@ -0,0 +1,10 @@
|
|||||||
|
{
|
||||||
|
"singleQuote": true,
|
||||||
|
"jsxSingleQuote": true,
|
||||||
|
"semi": false,
|
||||||
|
"tabWidth": 2,
|
||||||
|
"bracketSpacing": true,
|
||||||
|
"jsxBracketSameLine": false,
|
||||||
|
"arrowParens": "always",
|
||||||
|
"trailingComma": "none"
|
||||||
|
}
|
||||||
4
.travis.yml
Normal file
4
.travis.yml
Normal file
@ -0,0 +1,4 @@
|
|||||||
|
language: node_js
|
||||||
|
node_js:
|
||||||
|
- 12
|
||||||
|
- 10
|
||||||
8
LICENSE
Normal file
8
LICENSE
Normal file
@ -0,0 +1,8 @@
|
|||||||
|
The MIT License (MIT)
|
||||||
|
Copyright © 2020 Divlo
|
||||||
|
|
||||||
|
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
|
||||||
|
|
||||||
|
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
||||||
|
|
||||||
|
THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
||||||
55
README.md
Normal file
55
README.md
Normal file
@ -0,0 +1,55 @@
|
|||||||
|
<h1 align="center">react-component-form</h1>
|
||||||
|
|
||||||
|
<p align="center">
|
||||||
|
<strong>Manage React Forms with ease.</strong>
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<p align="center">
|
||||||
|
<a href="https://gitmoji.carloscuesta.me/"><img src="https://camo.githubusercontent.com/2a4924a23bd9ef18afe793f4999b1b9ec474e48f/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f6769746d6f6a692d253230f09f989c253230f09f988d2d4646444436372e7376673f7374796c653d666c61742d737175617265" alt="Gitmoji"/></a>
|
||||||
|
<a href="https://standardjs.com"><img src="https://img.shields.io/badge/code_style-standard-brightgreen.svg" alt="JavaScript Style Guide"/></a>
|
||||||
|
<a href="./LICENSE"><img src="https://img.shields.io/badge/licence-MIT-blue.svg" alt="Licence MIT"/></a>
|
||||||
|
<a href="https://www.npmjs.com/package/react-component-form"><img src="https://img.shields.io/npm/v/react-component-form.svg" alt="npm version"></a>
|
||||||
|
<img src="https://github.com/Divlo/react-component-form/workflows/Node.js%20CI/badge.svg" alt="Node.js CI" />
|
||||||
|
</p>
|
||||||
|
|
||||||
|
## 📜 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.
|
||||||
|
|
||||||
|
## 💾 Install
|
||||||
|
|
||||||
|
```bash
|
||||||
|
npm install --save react-component-form
|
||||||
|
```
|
||||||
|
|
||||||
|
## ⚙ Usage
|
||||||
|
|
||||||
|
```tsx
|
||||||
|
import React from 'react'
|
||||||
|
import Form, { HandleForm } from 'react-component-form'
|
||||||
|
|
||||||
|
const Example = () => {
|
||||||
|
const handleSubmit: HandleForm = (formData, formElement) => {
|
||||||
|
console.log(formData) // { inputName: 'value of the input' }
|
||||||
|
formElement.reset()
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Form onSubmit={handleSubmit}>
|
||||||
|
<input type='text' name='inputName' />
|
||||||
|
<button type='submit'>Submit</button>
|
||||||
|
</Form>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
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` :
|
||||||
|
|
||||||
|
- `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`.
|
||||||
|
|
||||||
|
## 📄 License
|
||||||
|
|
||||||
|
[MIT](./LICENSE)
|
||||||
5
example/README.md
Normal file
5
example/README.md
Normal file
@ -0,0 +1,5 @@
|
|||||||
|
This example was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
|
||||||
|
|
||||||
|
It is linked to the react-component-form package in the parent directory for development purposes.
|
||||||
|
|
||||||
|
You can run `npm install` and then `npm start` to test your package.
|
||||||
29998
example/package-lock.json
generated
Normal file
29998
example/package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
44
example/package.json
Normal file
44
example/package.json
Normal file
@ -0,0 +1,44 @@
|
|||||||
|
{
|
||||||
|
"name": "react-component-form-example",
|
||||||
|
"homepage": ".",
|
||||||
|
"version": "0.0.0",
|
||||||
|
"private": true,
|
||||||
|
"scripts": {
|
||||||
|
"start": "node ../node_modules/react-scripts/bin/react-scripts.js start",
|
||||||
|
"build": "node ../node_modules/react-scripts/bin/react-scripts.js build",
|
||||||
|
"test": "node ../node_modules/react-scripts/bin/react-scripts.js test",
|
||||||
|
"eject": "node ../node_modules/react-scripts/bin/react-scripts.js eject"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"@testing-library/jest-dom": "file:../node_modules/@testing-library/jest-dom",
|
||||||
|
"@testing-library/react": "file:../node_modules/@testing-library/react",
|
||||||
|
"@testing-library/user-event": "file:../node_modules/@testing-library/user-event",
|
||||||
|
"@types/jest": "file:../node_modules/@types/jest",
|
||||||
|
"@types/node": "file:../node_modules/@types/node",
|
||||||
|
"@types/react": "file:../node_modules/@types/react",
|
||||||
|
"@types/react-dom": "file:../node_modules/@types/react-dom",
|
||||||
|
"react": "file:../node_modules/react",
|
||||||
|
"react-component-form": "file:..",
|
||||||
|
"react-dom": "file:../node_modules/react-dom",
|
||||||
|
"react-scripts": "file:../node_modules/react-scripts",
|
||||||
|
"typescript": "file:../node_modules/typescript"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@babel/plugin-syntax-object-rest-spread": "^7.8.3"
|
||||||
|
},
|
||||||
|
"eslintConfig": {
|
||||||
|
"extends": "react-app"
|
||||||
|
},
|
||||||
|
"browserslist": {
|
||||||
|
"production": [
|
||||||
|
">0.2%",
|
||||||
|
"not dead",
|
||||||
|
"not op_mini all"
|
||||||
|
],
|
||||||
|
"development": [
|
||||||
|
"last 1 chrome version",
|
||||||
|
"last 1 firefox version",
|
||||||
|
"last 1 safari version"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
BIN
example/public/favicon.ico
Normal file
BIN
example/public/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.8 KiB |
48
example/public/index.html
Normal file
48
example/public/index.html
Normal file
@ -0,0 +1,48 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
|
||||||
|
<meta
|
||||||
|
name="viewport"
|
||||||
|
content="width=device-width, initial-scale=1, shrink-to-fit=no"
|
||||||
|
/>
|
||||||
|
<meta name="theme-color" content="#000000" />
|
||||||
|
|
||||||
|
<!--
|
||||||
|
manifest.json provides metadata used when your web app is added to the
|
||||||
|
homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
|
||||||
|
-->
|
||||||
|
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
|
||||||
|
|
||||||
|
<!--
|
||||||
|
Notice the use of %PUBLIC_URL% in the tags above.
|
||||||
|
It will be replaced with the URL of the `public` folder during the build.
|
||||||
|
Only files inside the `public` folder can be referenced from the HTML.
|
||||||
|
|
||||||
|
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
|
||||||
|
work correctly both with client-side routing and a non-root public URL.
|
||||||
|
Learn how to configure a non-root public URL by running `npm run build`.
|
||||||
|
-->
|
||||||
|
<title>react-component-form</title>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<noscript>
|
||||||
|
You need to enable JavaScript to run this app.
|
||||||
|
</noscript>
|
||||||
|
|
||||||
|
<div id="root"></div>
|
||||||
|
|
||||||
|
<!--
|
||||||
|
This HTML file is a template.
|
||||||
|
If you open it directly in the browser, you will see an empty page.
|
||||||
|
|
||||||
|
You can add webfonts, meta tags, or analytics to this file.
|
||||||
|
The build step will place the bundled scripts into the <body> tag.
|
||||||
|
|
||||||
|
To begin the development, run `npm start` or `yarn start`.
|
||||||
|
To create a production bundle, use `npm run build` or `yarn build`.
|
||||||
|
-->
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
15
example/public/manifest.json
Normal file
15
example/public/manifest.json
Normal file
@ -0,0 +1,15 @@
|
|||||||
|
{
|
||||||
|
"short_name": "react-component-form",
|
||||||
|
"name": "react-component-form",
|
||||||
|
"icons": [
|
||||||
|
{
|
||||||
|
"src": "favicon.ico",
|
||||||
|
"sizes": "64x64 32x32 24x24 16x16",
|
||||||
|
"type": "image/x-icon"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"start_url": ".",
|
||||||
|
"display": "standalone",
|
||||||
|
"theme_color": "#000000",
|
||||||
|
"background_color": "#ffffff"
|
||||||
|
}
|
||||||
BIN
example/src/github.jpg
Normal file
BIN
example/src/github.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 83 KiB |
112
example/src/index.css
Normal file
112
example/src/index.css
Normal file
@ -0,0 +1,112 @@
|
|||||||
|
*,
|
||||||
|
*::after,
|
||||||
|
*::before {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
|
||||||
|
'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji',
|
||||||
|
'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
|
||||||
|
font-size: 1rem;
|
||||||
|
font-weight: 400;
|
||||||
|
line-height: 1.5;
|
||||||
|
color: #212529;
|
||||||
|
text-align: left;
|
||||||
|
background-color: #fff;
|
||||||
|
}
|
||||||
|
h1,
|
||||||
|
h2,
|
||||||
|
h3,
|
||||||
|
h4,
|
||||||
|
h5,
|
||||||
|
h6 {
|
||||||
|
font-weight: 500;
|
||||||
|
line-height: 1.2;
|
||||||
|
}
|
||||||
|
h2 {
|
||||||
|
font-size: 2rem;
|
||||||
|
}
|
||||||
|
h4 {
|
||||||
|
font-size: 1.5rem;
|
||||||
|
}
|
||||||
|
h5 {
|
||||||
|
font-size: 1.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.result-container {
|
||||||
|
border-top: 0.2px solid lightgray;
|
||||||
|
border-bottom: 0.2px solid lightgray;
|
||||||
|
width: 100%;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.github-logo {
|
||||||
|
position: fixed;
|
||||||
|
top: 10px;
|
||||||
|
right: 10px;
|
||||||
|
}
|
||||||
|
.title-install {
|
||||||
|
color: gray;
|
||||||
|
margin-bottom: 50px;
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
form {
|
||||||
|
margin-bottom: 40px;
|
||||||
|
}
|
||||||
|
label {
|
||||||
|
display: inline-block;
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
}
|
||||||
|
.form-group {
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
.form-control {
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
height: calc(1.5em + 0.75rem + 2px);
|
||||||
|
padding: 0.375rem 0.75rem;
|
||||||
|
font-size: 1rem;
|
||||||
|
font-weight: 400;
|
||||||
|
line-height: 1.5;
|
||||||
|
color: #495057;
|
||||||
|
background-color: #fff;
|
||||||
|
background-clip: padding-box;
|
||||||
|
border: 1px solid #ced4da;
|
||||||
|
border-radius: 0.25rem;
|
||||||
|
transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
|
||||||
|
}
|
||||||
|
.btn {
|
||||||
|
display: inline-block;
|
||||||
|
font-weight: 400;
|
||||||
|
color: #212529;
|
||||||
|
text-align: center;
|
||||||
|
vertical-align: middle;
|
||||||
|
-webkit-user-select: none;
|
||||||
|
user-select: none;
|
||||||
|
background-color: transparent;
|
||||||
|
border: 1px solid transparent;
|
||||||
|
padding: 0.375rem 0.75rem;
|
||||||
|
font-size: 1rem;
|
||||||
|
line-height: 1.5;
|
||||||
|
border-radius: 0.25rem;
|
||||||
|
transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
|
||||||
|
border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.btn-primary {
|
||||||
|
color: #fff;
|
||||||
|
background-color: #007bff;
|
||||||
|
border-color: #007bff;
|
||||||
|
}
|
||||||
|
.btn-primary:hover {
|
||||||
|
color: #fff;
|
||||||
|
background-color: #0069d9;
|
||||||
|
border-color: #0062cc;
|
||||||
|
}
|
||||||
63
example/src/index.tsx
Normal file
63
example/src/index.tsx
Normal file
@ -0,0 +1,63 @@
|
|||||||
|
import React from 'react'
|
||||||
|
import ReactDOM from 'react-dom'
|
||||||
|
import Form, { HandleForm } from 'react-component-form'
|
||||||
|
|
||||||
|
import GithubLogo from './github.jpg'
|
||||||
|
import './index.css'
|
||||||
|
|
||||||
|
const App = () => {
|
||||||
|
const handleSubmit: HandleForm = (formData, formElement) => {
|
||||||
|
console.clear()
|
||||||
|
console.log('onSubmit: ', formData)
|
||||||
|
formElement.reset()
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleChange: HandleForm = (formData) => {
|
||||||
|
console.log('onChange: ', formData)
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className='container'>
|
||||||
|
<h2>{'<Form />'}</h2>
|
||||||
|
<h5 className='title-install'>npm i react-component-form</h5>
|
||||||
|
|
||||||
|
<Form onSubmit={handleSubmit} onChange={handleChange}>
|
||||||
|
<div className='form-group'>
|
||||||
|
<label htmlFor='name'>Name :</label>
|
||||||
|
<input
|
||||||
|
className='form-control'
|
||||||
|
type='text'
|
||||||
|
name='name'
|
||||||
|
id='name'
|
||||||
|
placeholder='name'
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<button type='submit' className='btn btn-primary'>
|
||||||
|
Submit
|
||||||
|
</button>
|
||||||
|
</Form>
|
||||||
|
|
||||||
|
<div className='result-container'>
|
||||||
|
<h4>
|
||||||
|
Try the form and Inspect the console{' '}
|
||||||
|
<span role='img' aria-label='smiley'>
|
||||||
|
😃
|
||||||
|
</span>
|
||||||
|
</h4>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className='github-logo'>
|
||||||
|
<a
|
||||||
|
target='_blank'
|
||||||
|
rel='noopener noreferrer'
|
||||||
|
href='https://github.com/Divlo/react-component-form'
|
||||||
|
>
|
||||||
|
<img width='30px' alt='github' src={GithubLogo} />
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
ReactDOM.render(<App />, document.getElementById('root'))
|
||||||
1
example/src/react-app-env.d.ts
vendored
Normal file
1
example/src/react-app-env.d.ts
vendored
Normal file
@ -0,0 +1 @@
|
|||||||
|
/// <reference types="react-scripts" />
|
||||||
30
example/tsconfig.json
Normal file
30
example/tsconfig.json
Normal file
@ -0,0 +1,30 @@
|
|||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"outDir": "dist",
|
||||||
|
"module": "esnext",
|
||||||
|
"lib": ["dom", "esnext", "DOM.Iterable"],
|
||||||
|
"moduleResolution": "node",
|
||||||
|
"jsx": "react",
|
||||||
|
"sourceMap": true,
|
||||||
|
"declaration": true,
|
||||||
|
"esModuleInterop": true,
|
||||||
|
"noImplicitReturns": true,
|
||||||
|
"noImplicitThis": true,
|
||||||
|
"noImplicitAny": true,
|
||||||
|
"strictNullChecks": true,
|
||||||
|
"suppressImplicitAnyIndexErrors": true,
|
||||||
|
"noUnusedLocals": true,
|
||||||
|
"noUnusedParameters": true,
|
||||||
|
"allowSyntheticDefaultImports": true,
|
||||||
|
"target": "es5",
|
||||||
|
"allowJs": true,
|
||||||
|
"skipLibCheck": true,
|
||||||
|
"strict": true,
|
||||||
|
"forceConsistentCasingInFileNames": true,
|
||||||
|
"resolveJsonModule": true,
|
||||||
|
"isolatedModules": true,
|
||||||
|
"noEmit": true
|
||||||
|
},
|
||||||
|
"include": ["src"],
|
||||||
|
"exclude": ["node_modules", "build"]
|
||||||
|
}
|
||||||
17786
package-lock.json
generated
Normal file
17786
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
63
package.json
Normal file
63
package.json
Normal file
@ -0,0 +1,63 @@
|
|||||||
|
{
|
||||||
|
"name": "react-component-form",
|
||||||
|
"version": "1.0.0",
|
||||||
|
"description": "Manage React Forms with ease.",
|
||||||
|
"author": "Divlo",
|
||||||
|
"license": "MIT",
|
||||||
|
"repository": "Divlo/react-component-form",
|
||||||
|
"main": "dist/index.js",
|
||||||
|
"module": "dist/index.modern.js",
|
||||||
|
"source": "src/index.tsx",
|
||||||
|
"engines": {
|
||||||
|
"node": ">=10"
|
||||||
|
},
|
||||||
|
"scripts": {
|
||||||
|
"build": "microbundle-crl --no-compress --format modern,cjs",
|
||||||
|
"start": "microbundle-crl watch --no-compress --format modern,cjs",
|
||||||
|
"prepare": "run-s build",
|
||||||
|
"test": "run-s test:unit test:lint test:build",
|
||||||
|
"test:build": "run-s build",
|
||||||
|
"test:lint": "eslint ./**/*.{js,jsx,ts,tsx} --fix",
|
||||||
|
"test:unit": "cross-env CI=1 react-scripts test --env=jsdom",
|
||||||
|
"test:watch": "react-scripts test --env=jsdom",
|
||||||
|
"predeploy": "cd example && npm install && npm run build",
|
||||||
|
"deploy": "gh-pages -d example/build"
|
||||||
|
},
|
||||||
|
"peerDependencies": {
|
||||||
|
"react": "^16.0.0"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@testing-library/jest-dom": "^4.2.4",
|
||||||
|
"@testing-library/react": "^9.5.0",
|
||||||
|
"@testing-library/user-event": "^7.2.1",
|
||||||
|
"@types/jest": "^25.1.4",
|
||||||
|
"@types/node": "^12.12.38",
|
||||||
|
"@types/react": "^16.9.27",
|
||||||
|
"@types/react-dom": "^16.9.7",
|
||||||
|
"@typescript-eslint/eslint-plugin": "^2.26.0",
|
||||||
|
"@typescript-eslint/parser": "^2.26.0",
|
||||||
|
"microbundle-crl": "^0.13.10",
|
||||||
|
"babel-eslint": "^10.0.3",
|
||||||
|
"cross-env": "^7.0.2",
|
||||||
|
"eslint": "^6.8.0",
|
||||||
|
"eslint-config-prettier": "^6.7.0",
|
||||||
|
"eslint-config-standard": "^14.1.0",
|
||||||
|
"eslint-config-standard-react": "^9.2.0",
|
||||||
|
"eslint-plugin-import": "^2.18.2",
|
||||||
|
"eslint-plugin-node": "^11.0.0",
|
||||||
|
"eslint-plugin-prettier": "^3.1.1",
|
||||||
|
"eslint-plugin-promise": "^4.2.1",
|
||||||
|
"eslint-plugin-react": "^7.17.0",
|
||||||
|
"eslint-plugin-standard": "^4.0.1",
|
||||||
|
"gh-pages": "^2.2.0",
|
||||||
|
"npm-run-all": "^4.1.5",
|
||||||
|
"prettier": "^2.0.4",
|
||||||
|
"react": "^16.13.1",
|
||||||
|
"react-dom": "^16.13.1",
|
||||||
|
"react-scripts": "^3.4.1",
|
||||||
|
"typescript": "^3.7.5"
|
||||||
|
},
|
||||||
|
"files": [
|
||||||
|
"dist"
|
||||||
|
]
|
||||||
|
}
|
||||||
57
src/index.tsx
Normal file
57
src/index.tsx
Normal file
@ -0,0 +1,57 @@
|
|||||||
|
import React, { useRef } from 'react'
|
||||||
|
|
||||||
|
export interface FormDataObject {
|
||||||
|
[key: string]: FormDataEntryValue
|
||||||
|
}
|
||||||
|
|
||||||
|
export type HandleForm = (
|
||||||
|
formData: FormDataObject,
|
||||||
|
formElement: HTMLFormElement
|
||||||
|
) => void
|
||||||
|
|
||||||
|
type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>
|
||||||
|
|
||||||
|
interface ReactFormProps
|
||||||
|
extends Omit<React.HTMLProps<HTMLFormElement>, 'onSubmit' | 'onChange'> {}
|
||||||
|
|
||||||
|
interface FormProps extends ReactFormProps {
|
||||||
|
onSubmit?: HandleForm
|
||||||
|
onChange?: HandleForm
|
||||||
|
}
|
||||||
|
|
||||||
|
const getFormDataObject = (formElement: HTMLFormElement): FormDataObject => {
|
||||||
|
return Object.fromEntries<FormDataEntryValue>(new FormData(formElement))
|
||||||
|
}
|
||||||
|
|
||||||
|
const Form = (props: FormProps): JSX.Element => {
|
||||||
|
const { onSubmit, onChange, children, ...rest } = props
|
||||||
|
const formRef = useRef<HTMLFormElement>(null)
|
||||||
|
|
||||||
|
const handleSubmit = (event: React.FormEvent): void => {
|
||||||
|
event.preventDefault()
|
||||||
|
if (onSubmit != null) {
|
||||||
|
const formData = getFormDataObject(formRef.current as HTMLFormElement)
|
||||||
|
onSubmit(formData, formRef.current as HTMLFormElement)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleChange = (): void => {
|
||||||
|
if (onChange != null) {
|
||||||
|
const formData = getFormDataObject(formRef.current as HTMLFormElement)
|
||||||
|
onChange(formData, formRef.current as HTMLFormElement)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<form
|
||||||
|
ref={formRef}
|
||||||
|
onSubmit={handleSubmit}
|
||||||
|
onChange={handleChange}
|
||||||
|
{...rest}
|
||||||
|
>
|
||||||
|
{children}
|
||||||
|
</form>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Form
|
||||||
18
src/typings.d.ts
vendored
Normal file
18
src/typings.d.ts
vendored
Normal file
@ -0,0 +1,18 @@
|
|||||||
|
/**
|
||||||
|
* Default CSS definition for typescript,
|
||||||
|
* will be overridden with file-specific definitions by rollup
|
||||||
|
*/
|
||||||
|
declare module '*.css' {
|
||||||
|
const content: { [className: string]: string }
|
||||||
|
export default content
|
||||||
|
}
|
||||||
|
|
||||||
|
interface SvgrComponent
|
||||||
|
extends React.StatelessComponent<React.SVGAttributes<SVGElement>> {}
|
||||||
|
|
||||||
|
declare module '*.svg' {
|
||||||
|
const svgUrl: string
|
||||||
|
const svgComponent: SvgrComponent
|
||||||
|
export default svgUrl
|
||||||
|
export { svgComponent as ReactComponent }
|
||||||
|
}
|
||||||
22
tsconfig.json
Normal file
22
tsconfig.json
Normal file
@ -0,0 +1,22 @@
|
|||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"outDir": "dist",
|
||||||
|
"module": "esnext",
|
||||||
|
"lib": ["dom", "esnext", "DOM.Iterable"],
|
||||||
|
"moduleResolution": "node",
|
||||||
|
"jsx": "react",
|
||||||
|
"sourceMap": true,
|
||||||
|
"declaration": true,
|
||||||
|
"esModuleInterop": true,
|
||||||
|
"noImplicitReturns": true,
|
||||||
|
"noImplicitThis": true,
|
||||||
|
"noImplicitAny": true,
|
||||||
|
"strictNullChecks": true,
|
||||||
|
"suppressImplicitAnyIndexErrors": true,
|
||||||
|
"noUnusedLocals": true,
|
||||||
|
"noUnusedParameters": true,
|
||||||
|
"allowSyntheticDefaultImports": true
|
||||||
|
},
|
||||||
|
"include": ["src"],
|
||||||
|
"exclude": ["node_modules", "dist", "example"]
|
||||||
|
}
|
||||||
6
tsconfig.test.json
Normal file
6
tsconfig.test.json
Normal file
@ -0,0 +1,6 @@
|
|||||||
|
{
|
||||||
|
"extends": "./tsconfig.json",
|
||||||
|
"compilerOptions": {
|
||||||
|
"module": "commonjs"
|
||||||
|
}
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user