I’m using the built-in aria button. I’m using it in a checkout page that directs users to Stripe when clicked. It takes a while to direct the user. Currently, the button gives no visual indication that they’ll be redirected in a few seconds.
How can I update the button component to do this?
I’d like this to be a configuration option via a “Disable after Click?” prop.
If enabled, the button would change to a state where it’s disabled and showing a spinner.
I’ve run into issues doing this:
What type of variant should I use? Base + Registered?
How do I hook this into the OnPress event? Currently, the event is linked to “Button.On Click”, which changes the location to the “Link to” URL.
Update: I’m making progress with this. Here’s what I’ve done:
Step 1
Update Button.tsx and add custom click handler
// This is a skeleton starter React component generated by Plasmic.
// This file is owned by you, feel free to edit as you see fit.
import * as React from "react";
import {
PlasmicButton,
DefaultButtonProps
} from "./plasmic/simply_scapes_marketing_website/PlasmicButton";
// Extend DefaultButtonProps to include all props
export interface ButtonProps extends DefaultButtonProps {}
function Button(props: ButtonProps) {
// Add local state with explicit boolean type
const [isDisabled, setIsDisabled] = React.useState<boolean>(props.disabled || false);
const [isLoading, setIsLoading] = React.useState<boolean>(false);
// Custom click handler with proper event type
const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
console.log('handleClick');
if (props.onClick) {
console.log('calling props.onClick(event)');
props.onClick(event);
}
if (props.disableAfterClick && !isDisabled) {
console.log('calling setIsDisabled(true);');
setIsDisabled(true);
setIsLoading(true);
}
};
// Render PlasmicButton with overridden props
return <PlasmicButton {...props} disabled={isDisabled} loading={isLoading} onClick={handleClick} />;
}
export default Button;
Step 2
Update plasmic-init.ts. This is needed to run the custom code.
Done. In addition to the custom code in Button.tsx, I’ve added the “Loading” variant. Setting “Disable after click?” in the button’s props switches to this variant after click.
