├── .editorconfig ├── .gitignore ├── .npmignore ├── .prettierignore ├── .prettierrc ├── CHANGELOG.md ├── CODE_OF_CONDUCT.md ├── LICENSE ├── README.md ├── Todo.md ├── docs ├── .gitignore ├── Gemfile ├── Troubleshooting.md ├── _config.yml ├── advanced │ ├── Array-fields.md │ ├── Object-fields.md │ ├── Toggling-a-field.md │ └── index.md ├── examples │ ├── Auto-disable-submit-button.md │ ├── Custom-input.md │ ├── Live-json-component.md │ └── index.md ├── images │ ├── custominput.gif │ ├── demo-custom.gif │ ├── demo-example.gif │ ├── demo-objectfield.gif │ ├── jsoncomponent.gif │ ├── submitbutton.gif │ ├── thumb.pdn │ ├── thumb.png │ ├── thumbextrasmall.png │ ├── thumbsmall.png │ ├── validator.drawio │ └── validator.png ├── index.md ├── reference │ ├── ArrayField.md │ ├── Field.md │ ├── FieldError.md │ ├── FormState.md │ ├── ObjectField.md │ ├── index.md │ ├── useAnyListener.md │ ├── useArrayField.md │ ├── useForm.md │ ├── useListener.md │ └── useObjectField.md ├── todo.txt └── validation │ ├── index.md │ ├── typed-object-validator.md │ └── yup.md ├── example ├── .gitignore ├── README.md ├── package.json ├── public │ ├── favicon.ico │ ├── index.html │ └── manifest.json ├── src │ ├── App.tsx │ ├── index.css │ ├── index.tsx │ └── react-app-env.d.ts ├── tsconfig.json └── yarn.lock ├── package.json ├── src ├── Components.tsx ├── Field.tsx ├── FieldError.tsx ├── form.ts ├── hooks.ts ├── index.ts └── react-app-env.d.ts ├── testing ├── README.md ├── package.json ├── public │ ├── favicon.ico │ ├── index.html │ ├── manifest.json │ ├── thumb.png │ ├── thumb2.png │ ├── workings.pdn │ ├── workings.png │ ├── workings2.png │ └── workings3.png ├── src │ ├── App.test.tsx │ ├── CustomInput.tsx │ ├── ExampleForm.tsx │ ├── Fieldform.tsx │ ├── OneOfObjectArrayForm.tsx │ ├── OneOfObjectForm.tsx │ ├── TestForm.tsx │ ├── VisualRender.tsx │ ├── index.css │ ├── index.tsx │ └── react-app-env.d.ts ├── tsconfig.json └── yarn.lock ├── tsconfig.json └── yarn.lock /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | charset = utf-8 5 | indent_style = space 6 | indent_size = 4 7 | end_of_line = lf 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .jekyll-cache 2 | 3 | # See https://help.github.com/ignore-files/ for more about ignoring files. 4 | 5 | # dependencies 6 | node_modules 7 | 8 | # builds 9 | build 10 | dist 11 | .rpt2_cache 12 | 13 | # misc 14 | .vscode 15 | .DS_Store 16 | .env 17 | .env.local 18 | .env.development.local 19 | .env.test.local 20 | .env.production.local 21 | 22 | npm-debug.log* 23 | yarn-debug.log* 24 | yarn-error.log* 25 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | /testing 2 | /example 3 | /src/ 4 | /.editorconfig 5 | node_modules/ 6 | /tsconfig.json 7 | package-lock.json 8 | yarn.lock 9 | /.prettierrc 10 | /.prettierignore 11 | .gitignore 12 | /.editorconfig 13 | /.vscode/ 14 | /CHANGELOG.md 15 | /CODE_OF_CONDUCT.md 16 | /README.md 17 | /Todo.md 18 | /LICENSE 19 | /docs -------------------------------------------------------------------------------- /.prettierignore: -------------------------------------------------------------------------------- 1 | README.md -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "singleQuote": false, 3 | "jsxSingleQuote": false, 4 | "semi": true, 5 | "tabWidth": 4, 6 | "bracketSpacing": true, 7 | "jsxBracketSameLine": false, 8 | "arrowParens": "always", 9 | "trailingComma": "none", 10 | "printWidth": 150 11 | } -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # 2.2.3 (02/08/2021) 2 | 3 | - Fix bug where `form.defaultValues` and `form.values` got overwritten when using utility functions in `useArrayListener`. 4 | 5 | # 2.2.2 (02/08/2021) 6 | 7 | - Fix crash when comparing Date with null Date field. 8 | 9 | # 2.2.1 (25/06/2021) 10 | 11 | - Fix crash on undefined/null array when using useArrayField. 12 | 13 | # 2.2.0 (9/05/2021) 14 | 15 | - `innerRef` prop on `Field` and `FieldError` 16 | - Removed `FormState.setDefaultValues` -> merged with `FormState.setValues` 17 | 18 | # 2.1.0 (29/04/2021) 19 | 20 | - Support `errorClassName`, `dirtyClassName`, `dirtyStyle`, `errorStyle` on Field component 21 | 22 | # 2.0.0 (29/04/2021) 23 | 24 | - Rewrite FormInput -> Field component 25 | - Rewrite FormError -> FieldError 26 | - Removed FormInput, FormSelect, FormTextarea, FormError 27 | - Better naming: renamed useArrayForm -> useArrayField, useChildForm -> useObjectField 28 | 29 | # 1.3.2 (26/04/2021) 30 | 31 | - Update documentation links. 32 | 33 | # 1.3.1 (26/04/2021) 34 | 35 | - It is now easier to create custom inputs by exposing `defaultSerializer` and `defaultDeserializer` to the user. 36 | 37 | # 1.3.0 (07/04/2021) 38 | 39 | - Moved `yupValidator` to seperate package [`typed-react-form-yup`](https://www.npmjs.com/package/typed-react-form-yup) 40 | - Child/array forms name prop only allows object fields now. 41 | - Pass FormEvent through `form.handleSubmit` 42 | - Allow string as argument to setErrors, which sets the error on the parent. 43 | - Allow validators to return undefined. 44 | 45 | # 1.2.13 (07/04/2021) 46 | 47 | - The `name` prop on FormTextArea and FormSelect did not get passed to their input element. 48 | 49 | # 1.2.12 (05/04/2021) 50 | 51 | - Excluding \*.modern.js files from build. 52 | 53 | # 1.2.11 (03/04/2021) 54 | 55 | - Fix: return true when validate is called on a form which doesn't have a validator set. 56 | 57 | # 1.2.10 (03/04/2021) 58 | 59 | - Do not reset values on `useForm` state change, because this can cause confusion. 60 | - `form.handleSubmit` helper function. 61 | - Fix: `form.setState` causing double `form.setState` call. 62 | 63 | # 1.2.9 (12/03/2021) 64 | 65 | - Fixed #2: operator _short-circuiting_ caused only one error to be set when using `form.setErrors`. (#2) 66 | 67 | # 1.2.8 (12/03/2021) 68 | 69 | - Object constraint on form type parameter, string constraint on error type parameter. (`FormState`) 70 | - React 17 support (#1) 71 | - `form.setErrors` should now be working correctly. 72 | - Custom error types are now correctly inferred from `useForm`: 73 | 74 | ``` 75 | type Language = "error-email" | "error-password" 76 | 77 | const form = useForm({email: "test@gmail.com", password: ""}, yupValidator(schema, {}, (message) => message as Language)); 78 | 79 | form.setError("email", ...); // Must be "error-email" | "error-password" 80 | ``` 81 | -------------------------------------------------------------------------------- /CODE_OF_CONDUCT.md: -------------------------------------------------------------------------------- 1 | # Contributor Covenant Code of Conduct 2 | 3 | ## Our Pledge 4 | 5 | In the interest of fostering an open and welcoming environment, we as 6 | contributors and maintainers pledge to making participation in our project and 7 | our community a harassment-free experience for everyone, regardless of age, body 8 | size, disability, ethnicity, sex characteristics, gender identity and expression, 9 | level of experience, education, socio-economic status, nationality, personal 10 | appearance, race, religion, or sexual identity and orientation. 11 | 12 | ## Our Standards 13 | 14 | Examples of behavior that contributes to creating a positive environment 15 | include: 16 | 17 | * Using welcoming and inclusive language 18 | * Being respectful of differing viewpoints and experiences 19 | * Gracefully accepting constructive criticism 20 | * Focusing on what is best for the community 21 | * Showing empathy towards other community members 22 | 23 | Examples of unacceptable behavior by participants include: 24 | 25 | * The use of sexualized language or imagery and unwelcome sexual attention or 26 | advances 27 | * Trolling, insulting/derogatory comments, and personal or political attacks 28 | * Public or private harassment 29 | * Publishing others' private information, such as a physical or electronic 30 | address, without explicit permission 31 | * Other conduct which could reasonably be considered inappropriate in a 32 | professional setting 33 | 34 | ## Our Responsibilities 35 | 36 | Project maintainers are responsible for clarifying the standards of acceptable 37 | behavior and are expected to take appropriate and fair corrective action in 38 | response to any instances of unacceptable behavior. 39 | 40 | Project maintainers have the right and responsibility to remove, edit, or 41 | reject comments, commits, code, wiki edits, issues, and other contributions 42 | that are not aligned to this Code of Conduct, or to ban temporarily or 43 | permanently any contributor for other behaviors that they deem inappropriate, 44 | threatening, offensive, or harmful. 45 | 46 | ## Scope 47 | 48 | This Code of Conduct applies both within project spaces and in public spaces 49 | when an individual is representing the project or its community. Examples of 50 | representing a project or community include using an official project e-mail 51 | address, posting via an official social media account, or acting as an appointed 52 | representative at an online or offline event. Representation of a project may be 53 | further defined and clarified by project maintainers. 54 | 55 | ## Enforcement 56 | 57 | Instances of abusive, harassing, or otherwise unacceptable behavior may be 58 | reported by contacting the project team at reddusted@gmail.com. All 59 | complaints will be reviewed and investigated and will result in a response that 60 | is deemed necessary and appropriate to the circumstances. The project team is 61 | obligated to maintain confidentiality with regard to the reporter of an incident. 62 | Further details of specific enforcement policies may be posted separately. 63 | 64 | Project maintainers who do not follow or enforce the Code of Conduct in good 65 | faith may face temporary or permanent repercussions as determined by other 66 | members of the project's leadership. 67 | 68 | ## Attribution 69 | 70 | This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4, 71 | available at https://www.contributor-covenant.org/version/1/4/code-of-conduct.html 72 | 73 | [homepage]: https://www.contributor-covenant.org 74 | 75 | For answers to common questions about this code of conduct, see 76 | https://www.contributor-covenant.org/faq 77 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2021 Stijn Rogiest 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |

2 | Typed React form 3 |

4 | 5 |

6 | 7 |

8 | 9 |

10 | NPM 11 | NPM Size 12 |

13 | 14 |

15 | A completely type-checked form builder for React with Typescript 16 |

17 | 18 | - ✔️ **Type-checked**: Make less errors, even field names are strongly typed. 19 | - 🤔 **Simple**: A well [documented](https://codestix.github.io/typed-react-form/), intuitive and easy to understand api. 20 | - :fire: **Fast**: Only rerenders the fields that change if used correctly. This allows you to create huge forms. 21 | - 📦 **Pretty Small**: [![NPM Size](https://img.shields.io/bundlephobia/minzip/typed-react-form)](https://bundlephobia.com/result?p=typed-react-form) 22 | 23 | ## Install 24 | 25 | ``` 26 | npm install typed-react-form 27 | ``` 28 | 29 | ## [Documentation here](https://codestix.github.io/typed-react-form/) 30 | 31 | ## Typescript demos 32 | 33 | ### Type-checked field names 34 | ![type-checked field names](https://github.com/CodeStix/typed-react-form/raw/master/docs/images/demo-example.gif) 35 | 36 | ### Type-checked custom inputs 37 | ![type-checked custom inputs](https://github.com/CodeStix/typed-react-form/raw/master/docs/images/demo-custom.gif) 38 | 39 | ### Type-checked object/array fields 40 | ![type-checked object/array fields](https://github.com/CodeStix/typed-react-form/raw/master/docs/images/demo-objectfield.gif) 41 | 42 | ## Javascript/typescript React 43 | 44 | This library is built from the ground up for React with typescript, but it also works with with vanilla React, without enforced type checking. 45 | 46 | ## Contributing 47 | 48 | Contributions are welcome. 49 | 50 | 1. Clone this repo. 51 | 2. Install deps using `yarn`. Yarn is required because of the resolutions field in package.json, npm does not support this. 52 | 3. Run `yarn start`, this will watch source files in `src/` and rebuild on change. 53 | 4. Open a new terminal and navigate to `testing/`, run `yarn` and `yarn start` to start the testing application. 54 | 5. Done! When you edit source code, it will be rebuilt and update the testing application. 55 | 56 | ## License 57 | 58 | MIT © [Stijn Rogiest](https://github.com/CodeStix) 59 | -------------------------------------------------------------------------------- /Todo.md: -------------------------------------------------------------------------------- 1 | - Typed `