https://github.com/hachibeedi/mayoiga
https://github.com/hachibeedi/mayoiga
form react react-hooks react-hooks-form
Last synced: about 2 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/hachibeedi/mayoiga
- Owner: hachibeeDI
- Created: 2018-10-09T05:13:51.000Z (over 6 years ago)
- Default Branch: main
- Last Pushed: 2024-02-21T02:00:28.000Z (over 1 year ago)
- Last Synced: 2025-02-24T03:04:41.031Z (3 months ago)
- Topics: form, react, react-hooks, react-hooks-form
- Language: TypeScript
- Homepage: https://hachibeedi.github.io/mayoiga/
- Size: 727 KB
- Stars: 8
- Watchers: 3
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
[](https://github.com/hachibeeDI/mayoiga/actions/workflows/checker.yml)
# Mayoiga
Fully typed form state management system for React.
No magic, ref free. It's built for complicated form state management.
## Feature
Support strong typed form state.
Every form should have two kind of types:
1. form state before validation
2. state after validation succeed
i.e. before validation, a field named "bio" might be nullable (`{bio: null | string}`) but it must not empty to submit (`{bio: zod.string().nonempty()}`).
Also considers:
- No ref, DOM free
- High performance, high tuning possibility
- Mayoiga uses "external state and selector" pattern. You can built your own form if you known what you would like to
## Features does not support
- Short coding
It's not a library for short coding or copy and paste template.
### Quickstart
```typeScript
const schema = zod.object({
name: zod.string(),
age: zod
.string()
.transform((val) => Number(val))
.refine((val) => (Number.isNaN(val) ? 0 : val)),
marked: zod.literal(true),
});
type BeforeValidation = {
name: string;
age: string;
marked: boolean;
};
const {
components: {Field, Slicer},
handleSubmit,
} = createFormHook({name:'test', age: '42', marked: false} as BeforeValidation, schema);
function App() {
const submitHandler = handleSubmit((e) => (result) => {
if (result.error) {
return alert('Err!');
}
console.log(result.data); /*
{
name: 'test',
age: 42, <- age is typed "number" before validation because of definition
marked: true, <- have to be "true", not as boolean. it's power of zod
}
*/
});
return (
{(tool) => }
{(tool) => }
{(tool) => }
);
}
```