How to use @data-driven-forms/react-form-renderer - 10 common examples

placeholder={ placeholder }
      fullWidth
      multiline
      inputProps={{
        readOnly: isReadOnly,
      }}
      { ...rest }
    />
  ),
  [componentTypes.CHECKBOX]: () => (
     }
      label={ label }
    />
  ),
  [componentTypes.RADIO]: () => (
    
  ),
  [componentTypes.SELECT_COMPONENT]: () => (
     option.hasOwnProperty('value') && option.value !== null)} // eslint-disable-line
      placeholder={ placeholder || 'Please choose' }
      value={ options.filter(({ value }) => rest.multi ? input.value.includes(value) : value === input.value) }
      isMulti={ rest.multi }

const schema = {
  fields: [{
    name: 'first-name',
    label: 'First name',
    component: componentTypes.TEXT_FIELD,
    isRequired: true,
    validate: [{
      type: validatorTypes.REQUIRED,
    }],
  }, {
    name: 'last-name',
    label: 'Last name',
    component: componentTypes.TEXT_FIELD,
    isRequired: true,
    validate: [{
      type: validatorTypes.REQUIRED,
    }],
  }, {
    name: 'age',
    label: 'Age',
    component: componentTypes.TEXT_FIELD,
    type: 'number',
  }],
};

const GetStartedForm = () => (
  <div>
    </div>

const buttonGroupStyle = {
  display: 'flex',
  justifyContent: 'space-around',
};

const ButtonGroup = ({ children, ...props }) => (
  <div style="{">
    { children }
  </div>
);

const layoutComponent = {
  [layoutComponents.FORM_WRAPPER]: FormWrapper,
  [layoutComponents.BUTTON]: Button,
  [layoutComponents.BUTTON_GROUP]: ButtonGroup,
  [layoutComponents.TITLE]: Title,
  [layoutComponents.DESCRIPTION]: Description,
};

const LayoutMapper = () =&gt; {
  const schema = {
    fields: [],
    title: 'Empty form with layout mapper',
    description: 'If you want to see the source code, please expand the code example.',
  };
  return (

<div style="{">
    { children }
  </div>
);

const layoutComponent = {
  [layoutComponents.FORM_WRAPPER]: FormWrapper,
  [layoutComponents.BUTTON]: Button,
  [layoutComponents.COL]: Fragment,
  [layoutComponents.FORM_GROUP]: Fragment,
  [layoutComponents.BUTTON_GROUP]: ButtonGroup,
  [layoutComponents.ICON]: Fragment,
  [layoutComponents.ARRAY_FIELD_WRAPPER]: Fragment,
  [layoutComponents.HELP_BLOCK]: Fragment,
  [layoutComponents.TITLE]: Title,
  [layoutComponents.DESCRIPTION]: Description,
};

const LayoutMapper = () =&gt; {
  const schema = {
    fields: [],
    title: 'Empty form with layout mapper',
    description: 'If you want to see the source code, please expand the code example.',
  };
  return (
     console.log('cancel action') }
    /&gt;

display: 'flex',
  justifyContent: 'space-around',
};

const ButtonGroup = ({ children, ...props }) => (
  <div style="{">
    { children }
  </div>
);

const layoutComponent = {
  [layoutComponents.FORM_WRAPPER]: FormWrapper,
  [layoutComponents.BUTTON]: Button,
  [layoutComponents.BUTTON_GROUP]: ButtonGroup,
  [layoutComponents.TITLE]: Title,
  [layoutComponents.DESCRIPTION]: Description,
};

const LayoutMapper = () =&gt; {
  const schema = {
    fields: [],
    title: 'Empty form with layout mapper',
    description: 'If you want to see the source code, please expand the code example.',
  };
  return (
     console.log('cancel action') }
    /&gt;

const buttonGroupStyle = {
  display: 'flex',
  justifyContent: 'space-around',
};

const ButtonGroup = ({ children, ...props }) => (
  <div style="{">
    { children }
  </div>
);

const layoutComponent = {
  [layoutComponents.FORM_WRAPPER]: FormWrapper,
  [layoutComponents.BUTTON]: Button,
  [layoutComponents.BUTTON_GROUP]: ButtonGroup,
  [layoutComponents.TITLE]: Title,
  [layoutComponents.DESCRIPTION]: Description,
};

const LayoutMapper = () =&gt; {
  const schema = {
    fields: [],
    title: 'Empty form with layout mapper',
    description: 'If you want to see the source code, please expand the code example.',
  };
  return (
     console.log('cancel action') }

const ButtonGroup = ({ children, ...props }) => (
  <div style="{">
    { children }
  </div>
);

const layoutComponent = {
  [layoutComponents.FORM_WRAPPER]: FormWrapper,
  [layoutComponents.BUTTON]: Button,
  [layoutComponents.COL]: Fragment,
  [layoutComponents.FORM_GROUP]: Fragment,
  [layoutComponents.BUTTON_GROUP]: ButtonGroup,
  [layoutComponents.ICON]: Fragment,
  [layoutComponents.ARRAY_FIELD_WRAPPER]: Fragment,
  [layoutComponents.HELP_BLOCK]: Fragment,
  [layoutComponents.TITLE]: Title,
  [layoutComponents.DESCRIPTION]: Description,
};

const LayoutMapper = () =&gt; {
  const schema = {
    fields: [],
    title: 'Empty form with layout mapper',
    description: 'If you want to see the source code, please expand the code example.',
  };
  return (
     console.log('cancel action') }

fields: [{
    component: componentTypes.TEXT_FIELD,
    name: 'regexp-pattern',
    label: 'Regepx',
    helperText: 'Value must be equal to Foo',
    validate: [{
      type: validatorTypes.PATTERN_VALIDATOR,
      pattern: /^Foo$/,
    }],
  }, {
    component: componentTypes.TEXT_FIELD,
    name: 'string-pattern',
    label: 'String pattern',
    helperText: 'Value must be equal to Foo',
    validate: [{
      type: validatorTypes.PATTERN_VALIDATOR,
      pattern: '^Foo$',
    }],
  }],
};

const PatternValidators = () => (
  <div>
    
  </div>
);

const schema = {
  title: 'Start typing',
  fields: [{
    component: componentTypes.TEXT_FIELD,
    name: 'length',
    label: 'Length field',
    helperText: 'min 5 characters, max 10',
    validate: [{
      type: validatorTypes.MIN_LENGTH,
      threshold: 5,
    }, {
      type: validatorTypes.MAX_LENGTH,
      threshold: 10,
    }],
  }, {
    component: componentTypes.TEXT_FIELD,
    name: 'exact-length',
    label: 'Exact length field',
    helperText: 'must be 3 characters long',
    validate: [{
      type: validatorTypes.EXACT_LENGTH,
      threshold: 3,
    }],
  }],
};

const LengthValidators = () => (
  <div>
    </div>

label: 'Switch disabled',
                  component: components.SWITCH,
                  isDisabled: true,
                },
                {
                  name: 'switch_3',
                  label: 'Switch readOnly',
                  component: components.SWITCH,
                  isReadOnly: true,
                },
                {
                  name: 'text_box_2',
                  label: 'Text Box with help',
                  title: 'Text Box with help',
                  helperText: 'Helper text',
                  component: components.TEXT_FIELD,
                },
                {
                  name: 'text_box_3',
                  label: 'Text Box required',
                  title: 'Text Box required',
                  isRequired: true,
                  component: components.TEXT_FIELD,
                  validate: [
                    { type: validators.REQUIRED },
                  ],
                },
                {
                  name: 'text_box_4',
                  label: 'Text Box readonly',
                  title: 'Text Box readonly',
                  isReadOnly: true,