Sidebar Props - 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',
        ...
      },
    ],
  },
]

Change the style of a Text / RichText

If a sideEditProps impacts the style of a visual editing component (for example the size or color of a Text or ReachText), you need to set the shouldRefreshText property of the sideEditProp to true, in order to see the change take effect as soon as you change the sidebar control.

This is because the renderBlock function of Text and RichText component is memoized for performance reasons, so React Bricks needs to know when it has to refresh the content to show the new styles applied.

sideEditProps: [
{
  name: 'fontColor',
  label: 'Font Color',
  type: types.SideEditPropType.Select,
  selectOptions: [...],
  shouldRefreshText: true
},

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 => 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)
    }
  }
},