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: 16 days 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 (over 4 years ago)
• Default Branch: master
• Last Pushed: 2023-07-20T10:20:27.000Z (over 1 year ago)
• Last Synced: 2024-12-22T00:28:38.600Z (about 1 month 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.