https://github.com/shrijan00003/mero-react-form
https://github.com/shrijan00003/mero-react-form
Last synced: 2 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/shrijan00003/mero-react-form
- Owner: shrijan00003
- Created: 2021-06-24T17:17:55.000Z (almost 4 years ago)
- Default Branch: main
- Last Pushed: 2021-07-03T17:50:32.000Z (almost 4 years ago)
- Last Synced: 2025-03-02T13:03:05.224Z (3 months ago)
- Language: TypeScript
- Size: 411 KB
- Stars: 2
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Mero React Form
> Simple react form
[](https://www.npmjs.com/package/mero-react-form) [](https://standardjs.com)
## Install
```bash
npm install --save mero-react-form
# Or
yarn add mero-react-form
```
## Usage
```tsx
import React from 'react'
import * as yup from 'yup'
import { InputField, useMeroForm } from 'mero-react-form'
const sleep = (ms: number) => new Promise((r) => setTimeout(r, ms))
const schema = yup.object().shape({
name: yup.string().required('Name required'),
address: yup.string().min(18, 'Must be at least 18 len')
})
const App = () => {
const { values, handleSubmit, errors, removeError } = useMeroForm({
initialValues: {
name: '',
address: ''
},
validationSchema: schema,
onSubmit: async ({ values }) => {
console.log({ name: values.name, address: values.address })
await sleep(1000)
alert(JSON.stringify(values, null, 2))
}
})
return (
<>
{errors.name ? errors.name : null}
{errors.address ? errors.address : null}
Submit
>
)
}
export default App
```
## Completed
- [x] Minimal input field with usePropState (That will be updated if props change)
- [x] useMeroForm hook with `values, handleSubmit, handleBlur, errors, removeError`
- [x] yup schema validation.
- [x] Validation on submit by default
- [x] Errors will have error values asynchronously
## Todo
- [ ] Handle change if user want and does not care about re rendering.
- [ ] custom validation function for real time validation
- [ ] `setFieldValue, setFieldError, setValues, setErrors` utilities.
- [ ] reinitialize functionality
## License
MIT © [shrijan00003](https://github.com/shrijan00003)