Component overrides

Overriding components

Vizzly allows you to use the components which you are already using throughout your application.

These components will only display when being used by your users, and not on the Vizzly admin page.

  renderButtonComponent={(props) => <MyButton {...props} />}
  renderSelectComponent={(props) => <MySelect {...props} />}
  // ... more props

Component override properties

  • renderLoadingComponent
  • renderButtonComponent
  • renderSelectComponent
  • renderDateTimeRangeInput
  • renderDateTimeInput
  • renderSavingComponent

You are also able to override the icons.

To make improve the discoverability of replaceable icons, you can use the developerTools prop to highlight the icons which can be replaced with a red border.

Icons as strings

You can also pass in a string for the Icon components.

  renderResetIcon={(props) => `<div>custom reset</div>`}
  renderDownloadIcon={(props) => `<div>custom download</div>`}
  // ... more props