A pluggable form generator for redux-form.
✅ No dependency on styling frameworks (bootstrap, etc)
✅ Pluggable - Add your own custom field types
✅ Uses a plain JSON object to define the form - can be sent from the server
✅ Supports conditional logic using JSON
yarn add @isobar-us/redux-form-genor
npm install --save @isobar-us/redux-form-gen- Basic Example
- All Fields Example
- Conditional Example
- Wizard Example
- Reactstrap Example (uses
customFieldTypes)
import {reduxForm, Form} from 'redux-form';
import {FormGenerator, injectGenProps} from '@isobar-us/redux-form-gen';
const fields = [
{
type: 'text',
label: 'First Name',
required: true,
questionId: 'firstName'
},
{
type: 'text',
label: 'Last Name',
required: true,
questionId: 'lastName'
}
];
// pass your fields into <FormGenerator />
const MyFields = ({handleSubmit}) => (
<Form onSubmit={handleSubmit}>
<FormGenerator fields={fields} />
<button type='submit'>Submit</button>
</Form>
);
// wrap reduxForm in injectGenProps to take care of validation and initialValues
const MyForm = injectGenProps(
reduxForm({
form: 'exampleForm'
})(MyFields)
);
// make sure to pass fields into the form wrapped with injectGenProps()
const MyPage = () => (
...
<MyForm fields={fields} />
);import {reduxForm, Field, Form} from 'redux-form';
import {FormGenerator, GenericRequiredLabel, injectGenProps} from '@isobar-us/redux-form-gen';
const SelectField => () => {
// ... your custom select field implementation
};
// defining your own field type definition.
const selectType = ({field}) => ({
_genFieldComponent: Field,
_genLabelComponent: GenericRequiredLabel,
name: field.questionId,
component: SelectField,
options: field.options
});
// mapping the type string (key) to the type definition (value)
const customFieldTypes = {
select: selectType
};
// using your new field type
const fields = [
{
type: 'select', // matches the key in `customFieldTypes`
questionId: 'test',
label: 'Who would win in a fight?',
options: [
{label: 'Horse-sized duck', value: 'horse-sized_duck'},
{label: '100 duck-sized horses', value: '100_duck-sized_horses'}
]
}
]
// pass your fields and customFieldTypes into <FormGenerator />
const MyFields = ({handleSubmit}) => (
<Form onSubmit={handleSubmit}>
<FormGenerator fields={fields} customFieldTypes={customFieldTypes} />
<button type='submit'>Submit</button>
</Form>
);
// wrap reduxForm in injectGenProps to take care of validation and initialValues
const MyForm = injectGenProps(
reduxForm({
form: 'myForm'
})(MyFields)
);
// make sure to pass fields and customFieldTypes into the form wrapped with injectGenProps()
const MyPage = () => (
...
<MyForm fields={fields} customFieldTypes={customFieldTypes} />
);type: string- the type of the field. you can add more type usingcustomFieldTypesprop on the<FormGenerator />.label: string- the label for the fieldchildFields: [FieldType]- an array of child fields. If the parent field is invisible, childFields will also be invisible. useful for thesectionandgrouptypes.conditionalVisible: ConditionalObject- the evaluated ConditionalObject controls whether a field and it's childFields are visible
Extends GenericProps
questionId: - thenameproperty for a field. supports dot-notationrequired: boolean- mark the field as requireddisabled: boolean- mark the field as disabled (also skips required validation)conditionalRequired: ConditionalObject- the evaluated ConditionalObject controls whether a field is requiredconditionalDisabled: ConditionalObject- the evaluated ConditionalObject controls whether a field is disabled (also skips required validation)
Extends GenericFieldProps. Renders a native <input type="text" /> component.
Extends GenericFieldProps. Renders a native <textarea> component.
Extends GenericFieldProps. Renders a native <input type="radio" /> component.
Extends GenericFieldProps. Renders a native <select> and <option> component.
options: [ { label: string, value: string } ]- an array of<option>s to render.
Extends GenericFieldProps. Uses ReduxForm FieldArray component, and renders each item, as an arrayItem type.
item: (FieldType: arrayItem)- thearrayItemtype that thearraywill use to render each item.addLabel- the label for theAddbutton for adding a new item to the array.
Extends GenericProps
label: string- supports templates for{index}and{indexOverTotal}ex:label: "Item {index}"
Extends GenericProps. Renders a extra label for grouping fields.
Extends GenericProps. Renders a header for grouping fields.
| Property | Type | Description |
|---|---|---|
_genFieldComponent |
Component | This is the redux-form Field, Fields, or FieldArray component that this should use to render |
_genComponent |
Component | the Component used if not using _genFieldComponent |
_genLabelComponent |
Component | the Component used to render the field label. defaults to GenericRequiredLabel |
_genChildren |
array | used to override the default childFields when iterating only (not rendering) |
_genDefaultValue |
any | used when calculating the initialValues with getDefaultValues() for a reduxForm component |
_genIsFilled |
func | fn({data, field, lookupTable, customFieldTypes}) => bool |
_genIsValid |
func | fn({data, field, lookupTable, customFieldTypes}) => bool |
_genSectionErrors |
func | fn({errors, data, field, lookupTable, customFieldTypes}) => void set in errors |
_genTraverseChildren |
func | fn({iterator, data, lookupTable}) => something.map((field) => iterator({field, data, lookupTable})) |
_genSkipChildren |
bool | skip rendering of childFields |
_genSkipCache |
bool | skip clear/restore functionality from FormGenerator cache |
_genHidden |
bool | skip rendering of this field and all it's children. |
| ... | ... | ... |
any other props for <Field> component |
any | name, names, component etc... |
Note: Any props with the _gen prefix are omitted when rendering the _genFieldComponent
- built in
SelectFieldcan only take strings as option values, since they get converted to strings on the<option>tag
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent