Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/freenowtech/uniform
Component for creating dynamic forms
https://github.com/freenowtech/uniform
Last synced: 10 days ago
JSON representation
Component for creating dynamic forms
- Host: GitHub
- URL: https://github.com/freenowtech/uniform
- Owner: freenowtech
- License: apache-2.0
- Created: 2019-05-29T10:37:46.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2022-12-09T04:22:23.000Z (about 2 years ago)
- Last Synced: 2024-10-12T05:55:23.314Z (2 months ago)
- Language: JavaScript
- Homepage:
- Size: 1.16 MB
- Stars: 9
- Watchers: 7
- Forks: 0
- Open Issues: 11
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Codeowners: CODEOWNERS
- Security: SECURITY.md
Awesome Lists containing this project
README
[](https://travis-ci.com/freenowtech/uniform)
[](https://codecov.io/gh/freenowtech/uniform)
## Description
This library allows you to generate forms based on provided JSON configuration.
## Features
* Use your own components on the Field level (https://jaredpalmer.com/formik/docs/api/field#component).
* Flexible validation in config (using [Yup](https://github.com/jquense/yup)).
* Conditional display logic.
* Custom options in Form level.
## Tutorial
#### Installation
1. Install library.
2. Import package `import formGenerator from '@freenow/uniform';`.
3. Generate form and include in your component:
```
const Form = formGenerator(formConfig, components);
...
```
#### Form configuration
The `formConfig` is an object that contains all field definitions. Let's look at simple example:
```
const formConfig = {
fields: [
{
component: 'TextInput',
defaultValue: 'default',
label: 'Text input with default value',
name: 'default',
},
],
name: 'test',
};
```
So the config consist of `fields` array and `name` (Unique form name). Each `field` element can have following properties: `component`, `defaultValue`, `label`, `name`, `displayConfigs`, `validationConfig`.
#### Validations
The `validationConfig` is implemented using [Yup](https://github.com/jquense/yup) library. In our case validation checks that the field is string and required. You can chain validation by adding elements in `methods` array.
```
const formConfig = {
fields: [
{
component: 'TextInput',
label: 'Text input with validation logic',
name: 'validation',
validationConfig: {
methods: [
{
message: 'Required',
type: 'required',
},
],
type: 'string',
},
},
],
name: 'test',
};
```
#### Display logic
The `displayConfigs` is implemented using [Yup](https://github.com/jquense/yup) library. In the example below we only show the "display" field when field with the name "default" has value "show". Feel free to depend on multiple fields values by adding additional element to `displayConfig`.
```
const formConfig = {
fields: [
{
component: 'TextInput',
defaultValue: 'default',
label: 'Text input with default value',
name: 'default',
},
{
component: 'TextInput',
displayConfigs: [
{
methods: [
{
compareValue: ['show'],
type: 'oneOf',
},
],
type: 'string',
valueKey: 'default',
},
],
label: 'Text input with display logic',
name: 'display',
},
],
name: 'test',
};
```
#### Component mapping
The `component` property refers to render function of each field and specified in the second paramer in generator. Let's have a look at this:
```
const FormContainer = ({ children, ...rest }) => (
{children}
);
FormContainer.propTypes = {
children: PropTypes.node.isRequired,
};
const TextInput = ({ field, setFieldValue }) => (
setFieldValue(field.name, e.target.value)}
id={field && field.name}
/>
);
TextInput.propTypes = {
field: PropTypes.object.isRequired,
setFieldValue: PropTypes.func.isRequired,
};
const SubmitButton = props => ;
const components = {
FormContainer,
SubmitButton,
TextInput,
};
```
The `components` object is a mapping between names and the actual components. `SubmitButton` and `FormContainer` are required to create. And `TextInput` will be linked to `component: 'TextInput'` in the form config. To create custom components for your field please follow [Formik docs on the Field element](https://jaredpalmer.com/formik/docs/api/field#component).
## Tests
By default, mandatory minimum test coverage of the library is set to 80%.
## [Contributing](./CONTRIBUTING.md)
## Authors and acknowledgment
### Authors
* [Ilya Lyamkin](https://github.com/ilyamkin)
* [Yasin Can Akmehmet](https://github.com/yasincanakmehmet)
* [Nikolai Lopin](https://github.com/nlopin)