Show a variant programmatically

We can add the variant class programmatically this way:

function Button( {properties, events, scope, slideId, context} ) {
    const { dsModel } = context;

    const [props, setProps] = useState(properties);
    const [active, setActive] = useState(false);

    const actions = {};

    function onClickHandler(event) {
        setActive(true);
        setTimeout( () => {
            setActive(false);
        },1000);
    }

    useComponent(properties, props, actions, style, setProps, dsModel);

    let body = renderSlots(props, setProps, events, actions, scope, dsModel, slideId, context);

    let classes = props.classes;

    if (active) {
        classes = classes + ` __pz_${props._referredUid}_active`;
    }

    return props.visible?<a className={classes} onClick={onClickHandler}>{body}</a>:null;
}

When the button is clicked it will be displayed with the active variant and a second later will be reset to the default variant.

Last updated