https://github.com/chenasraf/formplex-react
Incredibly easy & flexible React form hooks
https://github.com/chenasraf/formplex-react
form react react-hook react-hook-form
Last synced: about 2 months ago
JSON representation
Incredibly easy & flexible React form hooks
- Host: GitHub
- URL: https://github.com/chenasraf/formplex-react
- Owner: chenasraf
- License: mit
- Created: 2022-11-10T20:49:40.000Z (over 3 years ago)
- Default Branch: master
- Last Pushed: 2022-11-16T15:31:23.000Z (over 3 years ago)
- Last Synced: 2025-08-09T06:35:54.303Z (10 months ago)
- Topics: form, react, react-hook, react-hook-form
- Language: TypeScript
- Homepage: https://npmjs.com/package/formplex-react
- Size: 147 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# FormPlex - React
[GitHub](https://github.com/chenasraf/formplex-react) |
[Documentation](https://casraf.dev/formplex-react) | [NPM](https://npmjs.com/package/formplex-react)
| [casraf.dev](https://casraf.dev)
Handle forms in your React apps with incredible ease.
FormPlex lets you use React forms without the hassle; including easy validations, predictable and
simple usage & API, and great flexibility.
## Quick-start
See the [full documentation](https://chenasraf.github.io/formplex-react/) for all the available
options, return values and more examples.
### Use the hook
Start by calling the hook, passing in any options you would like for the form, and get the return
values as needed.
This is a full example of a hook usage with all the available options and return values. All options
are optional, see the docs for each for more information.
```tsx
const { field, handleSubmit, isValid, errors, state, rawState, dirty, setValue, setValues } =
useForm({
initialState: {
firstName: 'John',
lastName: 'Doe',
},
autoValidateBehavior: 'onChange',
errorMessages: {
required: 'This field is required',
minLength: (n) => `Must be more than ${n} chars long`,
maxLength: (n) => `Must be less than ${n} chars long`,
},
onSubmit(values, e) {
console.log('Form submitted:', values)
fetch('/submit', { method: 'POST', body: JSON.stringify(values) })
},
})
```
### Register an input
Use `field()` from the previous hook on your inputs, should support most input types:
```tsx
// you can import some built-in validators, or create your own
import { validator } from 'formplex-react'
n < 18 ? "Must be 18 or over" : null,
parse: Number,
})} />
...
```
### Full form example
Below is a full example of a simple form.
```tsx
import React from 'react'
import { useForm } from 'formplex-react'
interface MyFormData {
companyName: string
employeesCount: number
revenueRange: '$0-$50K' | '$50-$500K' | '$500K-$1M' | '$1M+'
}
export const MyForm: React.FC = () => {
const { field, handleSubmit, isValid, errors } = useForm({
onSubmit(values, e) {
console.log('Form submitted:', values)
fetch('/submit', { method: 'POST', body: JSON.stringify(values) })
},
})
return (
{errors.companyName && {errors.companyName.message}}
(n < 1 ? 'Must have at least 1 employee.' : null),
})}
/>
{errors.employeesCount && (
{errors.employeesCount.message}
)}
$0-$50K
$50-$500K
$500K-$1M
$1M+
{errors.revenueRange && {errors.revenueRange.message}}
Save
)
}
```
### Tips
- You normally don't need to use `state` to return the values of the form, you can use `onSubmit`
for most use-cases; however it is available when you need it.
- Use `setValue` or `setValues` when you manually need to change input values.
- You can check for the existence of each field inside `errors` to know if there are any errors on
that field. You can then check the type and message of said error if it exists.
## Contributing
I am developing this package on my free time, so any support, whether code, issues, or just stars is
very helpful to sustaining its life. If you are feeling incredibly generous and would like to donate
just a small amount to help sustain this project, I would be very very thankful!
I welcome any issues or pull requests on GitHub. If you find a bug, or would like a new feature,
don't hesitate to open an appropriate issue and I will do my best to reply promptly.
If you are a developer and want to contribute code, here are some starting tips:
1. Fork this repository
2. Run `yarn install`
3. Run `yarn start` to start file watch mode
4. Make any changes you would like
5. Create tests for your changes
6. Update the relevant documentation (readme, code comments, type comments)
7. Create a PR on upstream