Button | ArcBlock

ConnectButtonコンポーネントは、DID Connect認証プロセスを開始するための、事前にスタイル設定された認識しやすいボタンを提供します。これにより、アプリケーションのログインフローに一貫したユーザーエクスペリエンスを簡単に作成できます。このボタンは、ロゴやカラースキームを含む公式のDID Connectブランドでスタイル設定されており、ユーザーに明確な行動喚起を提供します。

インポート

このボタンを使用するには、ライブラリのButtonモジュールからインポートします。

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

基本的な使い方

最も一般的な使用例は、ConnectButtonをuseConnectフックと組み合わせることです。ボタンのonClickプロップは、フックから返されるopen関数に直接マッピングして、接続モーダルをトリガーできます。

Basic Usage

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

デフォルトでは、ボタンには「Continue With」というテキストとDID Connectのロゴが表示されます。

カスタマイズ

ボタンの外観や動作を簡単にカスタマイズできます。

カスタムテキスト

デフォルトのテキストを変更するには、希望のコンテンツをコンポーネントの子要素として渡すだけです。

Customizing Button Text

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

追加のプロップ

ConnectButtonは@arcblock/ux/lib/Buttonコンポーネント（Material-UIのButtonに基づく）のラッパーであり、そのすべての標準プロップを受け入れます。これにより、ボタンを無効にしたり、全幅にしたり、sxプロップでカスタムスタイルを適用したりするなど、広範なカスタマイズが可能です。

Passing Additional Props

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();

  // 例：プロセス実行中にボタンを無効にする
  const isLoading = true;

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

Props

children React.ReactNode — ボタン内に表示するコンテンツ。指定しない場合、デフォルトは"Continue With"です。
...rest ButtonProps — ConnectButtonは、基盤となるMaterial-UI Buttonコンポーネントに有効な他のすべてのプロップを受け入れます。これには、onClick、disabled、variant、color、fullWidth、sxなどの一般的なプロップが含まれます。

次のステップ

ConnectButtonの追加方法を理解したところで、次の論理的なステップは、その機能を支えるフックを理解することです。

useConnect フック

useConnectフックを使用して、プログラムでDidConnect UIモーダルを開いたり、閉じたり、管理したりする方法を学びます。