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} />}    
        /> 
    )
}

Management CSS