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

To help you get started, we’ve selected a few @data-driven-forms/react-form-renderer examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github data-driven-forms / react-forms / packages / mui-component-mapper / src / form-fields / form-fields.js View on Github external
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 }
github data-driven-forms / react-forms / packages / react-renderer-demo / src / app / src / doc-components / get-started.js View on Github external
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>
github data-driven-forms / react-forms / packages / react-renderer-demo / src / app / src / doc-components / component-mapper / layout-mapper.js View on Github external
const buttonGroupStyle = {
  display: 'flex',
  justifyContent: 'space-around',
};

const ButtonGroup = ({ children, ...props }) =&gt; (
  <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 (
github data-driven-forms / react-forms / packages / react-renderer-demo / src / app / src / doc-components / component-mapper / layout-mapper.js View on Github external
<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;
github data-driven-forms / react-forms / packages / react-renderer-demo / src / app / src / doc-components / component-mapper / layout-mapper.js View on Github external
display: 'flex',
  justifyContent: 'space-around',
};

const ButtonGroup = ({ children, ...props }) =&gt; (
  <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;
github data-driven-forms / react-forms / packages / react-renderer-demo / src / app / src / doc-components / component-mapper / layout-mapper.js View on Github external
const buttonGroupStyle = {
  display: 'flex',
  justifyContent: 'space-around',
};

const ButtonGroup = ({ children, ...props }) =&gt; (
  <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') }
github data-driven-forms / react-forms / packages / react-renderer-demo / src / app / src / doc-components / component-mapper / layout-mapper.js View on Github external
const ButtonGroup = ({ children, ...props }) =&gt; (
  <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') }
github data-driven-forms / react-forms / packages / react-renderer-demo / src-bak / docs-components / validators / pattern-validator.js View on Github external
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 = () =&gt; (
  <div>
    
  </div>
);
github data-driven-forms / react-forms / packages / react-renderer-demo / src / doc-components / validators / length-validators.js View on Github external
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 = () =&gt; (
  <div>
    </div>
github data-driven-forms / react-forms / packages / react-renderer-demo / src / app / pages / live-editor.js View on Github external
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,

@data-driven-forms/react-form-renderer

React Form Renderer. Data Driven Forms converts JSON form definitions into fully functional React forms.

Apache-2.0
Latest version published 30 days ago

Package Health Score

81 / 100
Full package analysis