https://github.com/benjaminvanryseghem/zen-forms
a React library to build forms. Based upon Formik
https://github.com/benjaminvanryseghem/zen-forms
formik forms hacktoberfest react
Last synced: 3 months ago
JSON representation
a React library to build forms. Based upon Formik
- Host: GitHub
- URL: https://github.com/benjaminvanryseghem/zen-forms
- Owner: BenjaminVanRyseghem
- License: mit
- Created: 2020-06-25T01:22:14.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2023-07-20T10:20:27.000Z (almost 2 years ago)
- Last Synced: 2025-02-14T08:14:53.531Z (5 months ago)
- Topics: formik, forms, hacktoberfest, react
- Language: JavaScript
- Homepage:
- Size: 2.03 MB
- Stars: 1
- Watchers: 3
- Forks: 1
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# zen-forms
A React library to build forms with optional validation, in a declarative way.
The main goal is to be able to define the form content once and for all, and use
it for viewing an entity as well as editing it.
It also aims to a strict separation between form's content, form's validation and form's UI.
It's build on top of [formik](https://github.com/formik/formik), [reactstrap-formik](https://github.com/shoaibkhan94/reactstrap-formik), and [yup](https://github.com/jquense/yup).
## Example
```js
const spec = [
new Input("name")
.label("Name"),
new Input("age")
.number()
.label("Age"),
new Dropdown("job", (values) => values.age > 18)
.label("What's your job")
.value("fireman", "Fireman")
.value("cop", "Cop")
]
const validation = Yup.object().shape({
name: Yup.string().required("Required"),
age: Yup
.number()
.positive()
.integer()
.required("Required")
});
function CreateAPersonForm() {
return (
{
alert(JSON.stringify(values, null, 2));
setTimeout(() => {
setSubmitting(false);
}, 1000);
}}
/>
);
}
function ViewAPersonForm({ person }) {
return (
);
}
```
## Custom Input
By subclassing `AbstractInput`, you can easily create your own custom input.
```js
export default class GroupedInput extends AbstractInput {
constructor() {
super(...arguments); // eslint-disable-line prefer-rest-params
this._children = [];
}
child(input) {
this._children.push(input);
return this;
}
children() {
return this._children;
}
render(renderer, ...args) {
return renderer.renderAsGroupedInput(this, ...args);
}
}
class MyFormBuilder extends FormikReactstrapBuilder {
renderAsGroupedInput(groupedInput, ...args) {
let [{ validationSchema, values }] = args;
if (!groupedInput.shouldShow(values)) {
return null;
}
let required = groupedInput.children().some((child) => isRequired(child.id(), validationSchema));
let id = groupedInput.id();
return (
{groupedInput.getLabel()}
{groupedInput.children().map((child) => child.render(this, ...args))}
);
}
}
```
## License
Copyright (c) 2020 Benjamin Van Ryseghem
---
Distributed under the MIT license. If you want to know more, see the [LICENSE.md](./LICENSE.md) file.