Designer customization
Customizing the FormBuilder interface
Using the customization FormBuilder
prop, you can
hide, style, or replace any parts of the FormBuilder interface.
A customization map object is passed to this property, in which
the options of the desired component are set using
its customizable key.
Example
import {type CustomizationMap, FormBuilder} from '@react-form-builder/designer'
const simpleCustomization: CustomizationMap = {
// Hiding the "Download" item in the main menu by using nested CSS selectors.
MainMenu_Dropdown: {
style: `
#menuitem-\\:r5\\: {
display: none;
}
`
},
// Customizing Header styles
Header: {
className: 'MyClassName',
style: {
backgroundColor: 'rgba(52,152,255,.25)',
borderRadius: '10px',
margin: 5,
marginBottom: 10,
padding: '8px!important'
}
},
// Adding a custom button to the header toolbar.
Header_Toolbar: {
customRenderer: defaultElement => <div style={{display: 'flex', gap: 10}}>
{defaultElement}
<button className={'rs-btn rs-btn-sm'}>My button</button>
</div>
},
// Hiding the icon on the "Toggle mode" button.
ToggleModeButton: {
style: `
background: black !important;
svg {
display: none;
}
`
},
// Hiding the localization dropdown.
LocalizationSelect: {
hidden: true
},
// Hiding the "Json view" button
JsonViewButton: {
hidden: true
},
// Hiding the property code button
PropertyCodeButton: {
hidden: true
}
}
const FormBuilderApp = () => {
return <FormBuilder
customization={simpleCustomization}
// other props
/>
}