Component Overrides

Overriding components

Vizzly allows you to use your own components, instead of providing a theme to style the default buttons, inputs and more.

Here is an example of overriding a Button and a Select component in the Filter Bar.

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

Show all
() => {
const rootStyle = {
backgroundColor: 'rgb(255, 255, 255)',
borderRadius: 4,
maxHeight: 28,
boxShadow:
'rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.12) 0px 1px 1px 0px, rgba(64, 68, 82, 0.16) 0px 0px 0px 1px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(64, 68, 82, 0.08) 0px 2px 5px 0px',
};
const MyButton = (props) => (
<button
data-type={props.type ?? 'secondary'}
style={{
...rootStyle,
cursor: 'pointer',
fontSize: 14,
fontWeight: 500,
lineHeight: '20px',
padding: '4px 8px 4px 8px',
color: '#414552',
border: 0,
}}
>
{props.label}
</button>
);
const ConvertToVizzlyButton = (props) => (
<MyButton
label={props.children}
onClick={() => props.onClick()}
type={props.primary ? 'primary' : 'secondary'}
/>
)
const MySelect = (props) => (
<div style={{ ...rootStyle, paddingRight: 8, display: "flex" }}>
<select
name={props.name}
defaultValue={props.defaultValue ?? 'none'}
style={{
color: 'rgb(64, 68, 82)',
fontSize: 14,
fontWeight: 500,
lineHeight: 20,
border: 0,
display: 'inline-flex',
padding: '4px 8px 4px 8px',
borderRadius: 4,
width: "100%"
}}
>
<option value="none" disabled>
{props.placeholder}
</option>
{props.options?.map((option, key) => {
return (
<option
key={key}
value={option.value}
onChange={() => props.onChange(option)}
>
{option.label}
</option>
);
})}
</select>
</div>
);
const ConvertToVizzlySelect = (props) => (
<MySelect
options={
props.options?.map(({ label, value }) => ({
value: String(value),
label: typeof label === 'function' ? label() : String(label),
})) ?? []
}
onChange={props.onChange}
placeholder={props.placeholder}
/>
);
return (
<Vizzly.Dashboard
renderButtonComponent={(props) => <ConvertToVizzlyButton {...props} />}
renderSelectComponent={(props) => <ConvertToVizzlySelect {...props} />}
/>
)
}