Sidebar Controls - Advanced

Here we'll see some advanced topic for sideEditProps: ready to become a React Bricks guru? 😎

First of all, as these are advanced topic, the best thing is to keep the documentation open for reference, to have all the signatures and details.

Collapsible groups

When you have many sidebarProps, it is convenient to group them into collapsible groups.

It is very easy, because sidebarProps can contain an array of props, but also an array of groups. Each group has a name (groupName), a prop that tells if it is open or collapsed by default (defaultOpen) and the array of props inside the group (props).

An example is worth a thousands words

sideEditProps: [
  {
    groupName: 'Layout',
    props: [
      {
        name: 'background',
        ...
      },
      {
        name: 'border',
        ...
      },
    ],
  },
  {
    groupName: 'Image',
    defaultOpen: true,
    props: [
      {
        name: 'imageSide',
        ...
      },
      {
        name: 'hasShadow',
        ...
      },
    ],
  },
]

Validation

You can pass a validation function to the validate property of a sideEditProp. This function receives as first argument the value of the prop to validate and, as second argument, the full props object, in order to perform cross-fields validations.

sideEditProps: [
{
  name: 'fontSize',
  label: 'Font Size',
  type: types.SideEditPropType.Number,
  validate: (value, allProps) => value >= 12 && value <= 32
},

Conditional rendering

You can decide to show a sideEditProp (or an entire collapsible group of props) only when a condition is met, based on the value of the other props. For example, you could like to show the props for an image only when that image is present.

You can do it using the show function (both on a single sideEditProp or a group). This function receives the object with the key-value props and should return true when the prop (or the group) should be visible.

sideEditProps: [
{
  name: 'hasShadow',
  label: 'Image Shadow',
  type: types.SideEditPropType.Boolean,
  show: props => !!props.showImage
},

sideEditProps: [
{
  groupName: 'Image settings',
  show: props => !!props.showImage,
  props: [...],
},

Custom controls

You can provide your own component as a control for a sideEditProp.

This component is passed the props value, onChange, isValid.

Async getOption

For a sideEditProp of type Select, instead of specifying a static array of options, you can also provide a getOptions function to get dynamic options.

This function can return both an array of options or a Promise which resolves to an array of options, useful if you need to fetch the options from an external API.

sideEditProps: [
{
  name: 'productCategory',
  label: 'Category',
  type: types.SideEditPropType.Select,
  selectOptions: {
    display: types.OptionsDisplay.Select,
    getOptions: () => {
      return axios.get('...').then(res => res.data)
    }
  }
},