https://github.com/nosachamos/formalizer
React hooks based form validation made for humans.
https://github.com/nosachamos/formalizer
awesome form form-validation form-validator hook just-works react-hooks usable validation
Last synced: 9 months ago
JSON representation
React hooks based form validation made for humans.
- Host: GitHub
- URL: https://github.com/nosachamos/formalizer
- Owner: nosachamos
- License: mit
- Created: 2019-06-23T18:44:25.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2023-03-01T02:51:18.000Z (almost 3 years ago)
- Last Synced: 2025-04-18T06:10:54.045Z (9 months ago)
- Topics: awesome, form, form-validation, form-validator, hook, just-works, react-hooks, usable, validation
- Language: JavaScript
- Size: 1.68 MB
- Stars: 13
- Watchers: 2
- Forks: 0
- Open Issues: 10
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
[](https://travis-ci.com/nosachamos/formalizer)
[](https://codecov.io/gh/nosachamos/formalizer)
[](https://github.com/prettier/prettier)
Formalizer is a React Hooks based form validation library made for humans. The cleanest code or your money back ;)
Simple, tiny, extensible, intuitive, documented, fully tested, magical.
# Installation
```sh
yarn add formalizer
```
or
```sh
npm install formalizer --save
```
# Sample Usage
```jsx
import { useFormalizer } from 'formalizer';
const UserProfileComponent = () => {
const { formRef, useInput, errors, isValid } = useFormalizer();
return (
{errors['name']}
{errors['email']}
Submit
);
};
```
For a complete guide on how each of these pieces work, see our [tutorial](docs/tutorial.md).
# In a Nutshell
Use the `useFormalizer` hook to gain access to the `useInput` hook, the errors currently in your form, whether the form is valid or not [and more](docs/useformalizer-hook.md).
Then, use the `useInput` to [setup validations](docs/examples.md) on your form inputs.
Formalizer offers two [built in validators](docs/builtin-validators.md) out-of-the-box and it integrates with the awesome [validator](https://www.npmjs.com/package/validator) library seamlessly, which means if you install it [you can use all of their validators](docs/third-party-validators.md).
But know that writing your own [custom validators](docs/custom-validators.md) is super easy.
Also, you may create [global validators](docs/global-validators.md) so that they accessible throughout your app. Doing so helps keep your code DRY and facilitates maintaining it.
Finally, if you use [Material UI](https://material-ui.com/) you may like the fact Formalizer [integrates](docs/material-ui.md) with it. If you use some other UI framework, chances are you can tweak our [settings](docs/settings.md) to make it work with it.
# Contributing
Contributions are very welcome!
We follow the "fork-and-pull" Git workflow.
1. **Create a Fork and clone it**
Simply click on the “fork” button of the repository page on GitHub.
The standard clone command creates a local git repository from your remote fork on GitHub.
2. **Modify the Code**
In your local clone, modify the code and commit them to your local clone using the git commit command.
Run `yarn test` and make sure all tests still pass.
Run `tslint --project .` and make sure you get no warnings.
3. **Push your Changes**
Make sure to update affected tests and/or add tests to any new features you may have created.
We are very careful to make sure coverage does not drop.
4. **Create a Pull Request**
We will review your changes and possibly start a discussion.
If changes are required, you can simply push these changes into your fork by repeating steps #3 and #4 and the pull request is updated automatically.
## License
MIT
---
Created and maintained by **[`Eduardo Born`](http://github.com/nosachamos)** with ❤ and coffee