Examples

1. Theming
2. Extending Form Elements

Theming

See it live

Define a Material UI Theme and pass it to theme prop of Form Renderer and Form Architect

const myTheme = {
  palette: {
    primary: {
      main: '#0d1821',
    },
    secondary: {
      main: '#344966',
    },
  },
};

// ... other code

<FormArchitect {...props} theme={myTheme} />
<FormRenderer {...props} theme={myTheme} />

Extending Form Elements

See it live

To add a component to Form Architect define a FormElement and pass component as its render property. Pass created FormElement as an array to formElements prop.

If you pass data to Form Renderer as a JSON, don’t forget to add any extended components to fields prop, otherwise this step is not required and components will be mapped from render property.

const Element = () => {
  return <div>I am new element</div>;
};

const myElement: FormElement = {
  render: Element,
  label: 'My Element',
  name: 'myElement',
  icon: <div />,
  attributes: [],
  validationType: 'string',
};


// ... other code

<FormArchitect {...props} formElements={[myElement]} />
<FormRenderer {...props} fields={[Element]} />