Button

The ConnectButton component offers a pre-styled and recognizable button for initiating the DID Connect authentication process. It simplifies creating a consistent user experience for your application's login flow. The button is styled with the official DID Connect branding, including the logo and color scheme, providing a clear call-to-action for users.

Import#

To use the button, import it from the library's Button module.

import ConnectButton from '@arcblock/did-connect-react/lib/Button';

Basic Usage#

The most common use case is to pair the ConnectButton with the useConnect hook. The onClick prop of the button can be directly mapped to the open function returned by the hook to trigger the connection modal.

import { useConnect } from '@arcblock/did-connect-react/lib/Connect/use-connect';
import ConnectButton from '@arcblock/did-connect-react/lib/Button';

export default function MyLoginComponent() {
  const { open } = useConnect();

  return (
    <ConnectButton onClick={open} />
  );
}

By default, the button renders with the text "Continue With" followed by the DID Connect logo.

Customization#

You can easily customize the button's appearance and behavior.

Custom Text#

To change the default text, simply pass your desired content as children to the component.

import { useConnect } from '@arcblock/did-connect-react/lib/Connect/use-connect';
import ConnectButton from '@arcblock/did-connect-react/lib/Button';

export default function CustomLoginComponent() {
  const { open } = useConnect();

  return (
    <ConnectButton onClick={open}>
      Login with DID Wallet
    </ConnectButton>
  );
}

Additional Props#

The ConnectButton is a wrapper around the @arcblock/ux/lib/Button component (which is based on Material-UI's Button) and accepts all of its standard props. This allows for extensive customization, such as disabling the button, making it full-width, or applying custom styles with the sx prop.

import { useConnect } from '@arcblock/did-connect-react/lib/Connect/use-connect';
import ConnectButton from '@arcblock/did-connect-react/lib/Button';

export default function DisabledButtonComponent() {
  const { open } = useConnect();

  // Example: disable the button while a process is running
  const isLoading = true; 

  return (
    <ConnectButton
      onClick={open}
      disabled={isLoading}
      fullWidth
      sx={{ mt: 2, mb: 2 }}
    >
      {isLoading ? 'Connecting...' : 'Login with DID Wallet'}
    </ConnectButton>
  );
}

Props#

Next Steps#

Now that you know how to add a ConnectButton, the next logical step is to understand the hook that powers its functionality.