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.

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

Component override properties

• renderLoadingComponent
• renderButtonComponent
• renderAdvancedFilter
• 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.

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