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) => (<buttondata-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) => (<MyButtonlabel={props.children}onClick={() => props.onClick()}type={props.primary ? 'primary' : 'secondary'}/>)const MySelect = (props) => (<div style={{ ...rootStyle, paddingRight: 8, display: "flex" }}><selectname={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 (<optionkey={key}value={option.value}onChange={() => props.onChange(option)}>{option.label}</option>);})}</select></div>);const ConvertToVizzlySelect = (props) => (<MySelectoptions={props.options?.map(({ label, value }) => ({value: String(value),label: typeof label === 'function' ? label() : String(label),})) ?? []}onChange={props.onChange}placeholder={props.placeholder}/>);return (<Vizzly.DashboardrenderButtonComponent={(props) => <ConvertToVizzlyButton {...props} />}renderSelectComponent={(props) => <ConvertToVizzlySelect {...props} />}/>)}