Conditional render

Conditional render utility is a useful tool when you want to show additional parts of the form based on specific value in specific field or even more fields.

type FieldStructure = {
   // ... rest of the every field props,
     conditionalRender?: {
        conditionalFields: ConditionalType[];
        conditionalRulesChainOption?: 'AND' | 'OR';
    };
}

interface ConditionalType extends FieldTrackerInterface {
    comparisonMethod: (value: any) => boolean;
}

interface FieldTrackerInterface {
    fieldName: string;
    useSamePath?: boolean;
}

Conditional render based on one field value

Live Editor

// You can play with code, with HTML tags and text as much as you want! async function onSubmit(values, form, callback) { await(300); alert(JSON.stringify(values)); } const schema: FormSchema = { name: { fieldLabel: () => <h2>Name</h2> type: 'text', fieldWrapperProperties: { className: 'mb-2' }, } surname: { conditionalRender: { conditionalFields: [ { fieldName: 'name', comparisonMethod: (value: string) => value === 'John' } ] }, fieldLabel: () => <h2>Surname</h2> type: 'text', fieldWrapperProperties: { className: 'mb-2' }, } } render ( <> <span>Type <i>John</i> to see the magic</span> <FormWrapper schema={schema} onSubmit={onSubmit} > <Button type='submit' scheme='primary'> Submit </Button> </FormWrapper> </> )

// You can play with code, with HTML tags and text as much as you want!
async function onSubmit(values, form, callback) {
    await(300);
    alert(JSON.stringify(values));
}
const schema: FormSchema = {
    name: {
        fieldLabel: () => <h2>Name</h2>
        type: 'text',
        fieldWrapperProperties: { className: 'mb-2' },
    }
    surname: {
        conditionalRender: {
            conditionalFields: [
                {
                    fieldName: 'name',
                    comparisonMethod: (value: string) =>  value === 'John'
                }
            ]
        },
        fieldLabel: () => <h2>Surname</h2>
        type: 'text',
        fieldWrapperProperties: { className: 'mb-2' },
    }
}
render (
    <>
        <span>Type <i>John</i> to see the magic</span>
         <FormWrapper
            schema={schema}
            onSubmit={onSubmit}
        >
            <Button type='submit' scheme='primary'>
                Submit
            </Button>
        </FormWrapper>
    </>
)

Result

Conditional render with useSamePath property

useSamePath property is allowing to only put the field name inside the fieldName property without replicating the whole path to that field. You can spot the difference inside the schema.

It is super useful inside nested sections or array fields, since you can easily point to the nearest sibling field.

Live Editor

// You can play with code, with HTML tags and text as much as you want! async function onSubmit(values, form, callback) { await(300); alert(JSON.stringify(values)); } const schema: FormSchema = { nameSection:{ type: 'section', fields: [ { name: { fieldLabel: () => <h2>Name</h2> type: 'text', fieldWrapperProperties: { className: 'mb-2' }, } }, { surname: { conditionalRender: { conditionalFields: [ { fieldName: 'name', comparisonMethod: (value: string) => value === 'John' useSamePath: true } ] }, fieldLabel: () => <h2>Surname</h2> type: 'text', fieldWrapperProperties: { className: 'mb-2' }, } } ] } foodSection:{ type: 'section', fields: [ { favFood: { fieldLabel: () => <h2>Favourite food</h2> type: 'text', fieldWrapperProperties: { className: 'mb-2' }, } }, { favouritePlace: { conditionalRender: { conditionalFields: [ { fieldName: 'foodSection.favFood', comparisonMethod: (value: string) => value === 'pizza' } ] }, fieldLabel: () => <h2>Favourite place</h2> type: 'text', fieldWrapperProperties: { className: 'mb-2' }, } } ] } } render ( <> <p>Type <i>John</i> inside <i>Name</i> field to see the magic</p> <p>Type <i>pizza</i> inside <i>Favourite food</i> field to see the magic</p> <FormWrapper schema={schema} onSubmit={onSubmit} > <Button type='submit' scheme='primary'> Submit </Button> </FormWrapper> </> )

// You can play with code, with HTML tags and text as much as you want!
async function onSubmit(values, form, callback) {
    await(300);
    alert(JSON.stringify(values));
}
const schema: FormSchema = {
    nameSection:{
        type: 'section',
        fields: [
            {
                name: {
                    fieldLabel: () => <h2>Name</h2>
                    type: 'text',
                    fieldWrapperProperties: { className: 'mb-2' },
                }
            },
            {
                surname: {
                    conditionalRender: {
                         conditionalFields: [
                            {
                                fieldName: 'name',
                                comparisonMethod: (value: string) =>  value === 'John'
                                useSamePath: true
                            }
                        ]
                    },
                    fieldLabel: () => <h2>Surname</h2>
                    type: 'text',
                    fieldWrapperProperties: { className: 'mb-2' },
                }
            }
        ]
    }
    foodSection:{
        type: 'section',
        fields: [
            {
                favFood: {
                    fieldLabel: () => <h2>Favourite food</h2>
                    type: 'text',
                    fieldWrapperProperties: { className: 'mb-2' },
                }
            },
            {
                favouritePlace: {
                    conditionalRender: {
                         conditionalFields: [
                            {
                                fieldName: 'foodSection.favFood',
                                comparisonMethod: (value: string) =>  value === 'pizza'
                            }
                        ]
                    },
                    fieldLabel: () => <h2>Favourite place</h2>
                    type: 'text',
                    fieldWrapperProperties: { className: 'mb-2' },
                }
            }
        ]
    }
}
render (
    <>
        <p>Type <i>John</i> inside <i>Name</i> field to see the magic</p>
        <p>Type <i>pizza</i> inside <i>Favourite food</i> field to see the magic</p>
         <FormWrapper
            schema={schema}
            onSubmit={onSubmit}
        >
            <Button type='submit' scheme='primary'>
                Submit
            </Button>
        </FormWrapper>
    </>
)

Result

Conditional render based on more fields value

By default all the comparison method result are check with 'AND' option based on array method .every. Therefor to handle more fields in conditional render, all of them have to match the values to show the field to the user.

Live Editor

// You can play with code, with HTML tags and text as much as you want! async function onSubmit(values, form, callback) { await(300); alert(JSON.stringify(values)); } const schema: FormSchema = { name: { fieldLabel: () => <h2>Name</h2> type: 'text', fieldWrapperProperties: { className: 'mb-2' }, }, surname: { fieldLabel: () => <h2>Surname</h2> type: 'text', fieldWrapperProperties: { className: 'mb-2' }, } favFood: { fieldLabel: () => <h2>Favourite food</h2> type: 'text', fieldWrapperProperties: { className: 'mb-2' }, conditionalRender: { conditionalFields: [ { fieldName: 'name', comparisonMethod: (value: string) => value === 'John' }, { fieldName: 'surname', comparisonMethod: (value: string) => value === 'Doe' } ] } } } render ( <> <p>Type <i>John</i> inside <i>Name</i> field to see the magic</p> <p>Type <i>Doe</i> inside <i>Surname</i> field to see the magic</p> <FormWrapper schema={schema} onSubmit={onSubmit} > <Button type='submit' scheme='primary'> Submit </Button> </FormWrapper> </> )

// You can play with code, with HTML tags and text as much as you want!
async function onSubmit(values, form, callback) {
    await(300);
    alert(JSON.stringify(values));
}
const schema: FormSchema = {
    name: {
        fieldLabel: () => <h2>Name</h2>
        type: 'text',
        fieldWrapperProperties: { className: 'mb-2' },
    },
    surname: {
        fieldLabel: () => <h2>Surname</h2>
        type: 'text',
        fieldWrapperProperties: { className: 'mb-2' },
    }
    favFood: {
        fieldLabel: () => <h2>Favourite food</h2>
        type: 'text',
        fieldWrapperProperties: { className: 'mb-2' },
        conditionalRender: {
            conditionalFields: [
                {
                    fieldName: 'name',
                    comparisonMethod: (value: string) =>  value === 'John'
                },
                {
                    fieldName: 'surname',
                    comparisonMethod: (value: string) =>  value === 'Doe'
                }
            ]
        }
    }
}
render (
    <>
        <p>Type <i>John</i> inside <i>Name</i> field to see the magic</p>
        <p>Type <i>Doe</i> inside <i>Surname</i> field to see the magic</p>
         <FormWrapper
            schema={schema}
            onSubmit={onSubmit}
        >
            <Button type='submit' scheme='primary'>
                Submit
            </Button>
        </FormWrapper>
    </>
)

Result

Conditional render based on more fields value with 'OR' logical check

There is an option to change default behaviour presented in the previous example. Additional parameter called conditionalRulesChainOption can change the testing method behind the scene from .every to .some so if one of the values match, the field would be rendered.

Live Editor

// You can play with code, with HTML tags and text as much as you want! async function onSubmit(values, form, callback) { await(300); alert(JSON.stringify(values)); } const schema: FormSchema = { name: { fieldLabel: () => <h2>Name</h2> type: 'text', fieldWrapperProperties: { className: 'mb-2' }, }, surname: { fieldLabel: () => <h2>Surname</h2> type: 'text', fieldWrapperProperties: { className: 'mb-2' }, } favFood: { fieldLabel: () => <h2>Favourite food</h2> type: 'text', fieldWrapperProperties: { className: 'mb-2' }, conditionalRender: { conditionalRulesChainOption: 'OR', conditionalFields: [ { fieldName: 'name', comparisonMethod: (value: string) => value === 'John' }, { fieldName: 'surname', comparisonMethod: (value: string) => value === 'Doe' } ] } } } render ( <> <p>Type <i>John</i> inside <i>Name</i> field to see the magic or Type <i>Doe</i> inside <i>Surname</i> field to see the magic</p> <FormWrapper schema={schema} onSubmit={onSubmit} > <Button type='submit' scheme='primary'> Submit </Button> </FormWrapper> </> )

// You can play with code, with HTML tags and text as much as you want!
async function onSubmit(values, form, callback) {
    await(300);
    alert(JSON.stringify(values));
}
const schema: FormSchema = {
    name: {
        fieldLabel: () => <h2>Name</h2>
        type: 'text',
        fieldWrapperProperties: { className: 'mb-2' },
    },
    surname: {
        fieldLabel: () => <h2>Surname</h2>
        type: 'text',
        fieldWrapperProperties: { className: 'mb-2' },
    }
    favFood: {
        fieldLabel: () => <h2>Favourite food</h2>
        type: 'text',
        fieldWrapperProperties: { className: 'mb-2' },
        conditionalRender: {
            conditionalRulesChainOption: 'OR',
            conditionalFields: [
                {
                    fieldName: 'name',
                    comparisonMethod: (value: string) =>  value === 'John'
                },
                {
                    fieldName: 'surname',
                    comparisonMethod: (value: string) =>  value === 'Doe'
                }
            ]
        }
    }
}
render (
    <>
        <p>Type <i>John</i> inside <i>Name</i> field to see the magic or Type <i>Doe</i> inside <i>Surname</i> field to see the magic</p>
         <FormWrapper
            schema={schema}
            onSubmit={onSubmit}
        >
            <Button type='submit' scheme='primary'>
                Submit
            </Button>
        </FormWrapper>
    </>
)

Result