Add Components

With LetsForm it’s possible to customize the components palette in order to add custom React views to the forms.


import { MyCustomComponent } from './components
 
<LetsForm
  form={myForm}
  components={{
    'my-custom-component': {
      'react-rsuite5': MyCustomComponent
    }
  }}
/>

The above code means that in the form schema, a component with name my-custom-component', when using the UI framework react-rsuite5will be rendered using the React componentMyCustomComponent(use*` to use the custom component for all frameworks).

A LetsForm component looks like this


const MyCustomComponent = ({
  name,
  hint,
  label,
  onChange,
  onBlur,
  required,
  disabled,
  readOnly,
  value,
  ...rest
}) => {
  //
  return (
    <div>
      <input
        value={value}
        onChange={e => {
          onChange(e.target.value);
        }}
 
      />
    </div>
  );
}

Properties like name, hint, label, onChange, onBlur, required, disable and readOnly are common for all components, in rest are all other keys of the field payload in the form schema:


{
  "version": '1',
  "fields": [
    {
      "component": "my-custom-component",
      "label": "My Component",
      "name": "field_1",
      "some-config-1": 42 // this will be available in "rest" var
    }
  ]
}

It’s up to the component view to render all elements based on the following fields:

Name	Type	Description
name	string	the key of the payload to store the value
label	string	The label of the field
value	any	the default / current value of the field
required	boolean	Used to render the view in order to show this field is required by validation
onChange	function	First argument is the new value of the field
onBlur	function	Used mainly to trigger the validation
disabled	boolean
readOnly	boolean
hint	string	Help text related to this field