メインコンテンツまでスキップ

サインアップブロック

SignUp コンポーネント は、React と TypeScript で構築された、完全にカスタマイズ可能でアクセシブルなサインアップフォームです。モダンなデザインパターン、フォーム検証、利用規約への同意、柔軟なカスタマイズオプションを備えた、完全なユーザー登録インターフェースを提供します。

🚀 インストール​

npm install @nodeblocks/frontend-signup-block@0.3.2

📖 使用方法​

import {SignUp} from '@nodeblocks/frontend-signup-block';
function BasicSignUp() {
  return (
    <SignUp
      onChange={(setError, getValues, clearErrors) => {
        console.log('Form values:', getValues());
        const values = getValues();
        if (!values.email) {
          setError('email', {message: 'Email is required', type: 'required'});
        } else {
          clearErrors('email');
        }
      }}
      onSubmit={formData => {
        console.log('Form submitted:', formData);
      }}
      style={{display: 'flex', flexDirection: 'column', gap: '16px'}}>
      <SignUp.SignUpTitle>Create Your Account</SignUp.SignUpTitle>
      <SignUp.EmailField label="Email Address" placeholder="Enter your email" />
      <SignUp.PasswordField label="Password" placeholder="Enter your password" />
      <SignUp.TermsOfUse name="agreesUserAgreement" label="I agree to the terms of use" />
      <SignUp.PrivacyPolicy name="agreesPrivacyPolicy" label="I agree to the privacy policy" />
      <SignUp.SignUpButton>Sign Up</SignUp.SignUpButton>
      <SignUp.GotoSignIn>
        <span>Already have an account? <a href="#signin">Sign In</a></span>
      </SignUp.GotoSignIn>
    </SignUp>
  );
}

🔧 Props リファレンス​

メインコンポーネントの props​

プロパティ型デフォルト説明
onSubmitSubmitHandler<T>必須有効なデータでフォームが送信されたときに呼び出されるコールバック関数
onChange(setError, getValues, clearErrors) => void必須フォーム値が変更されたときに呼び出されるコールバック関数。検証用のフォーム制御関数を提供します
defaultDataDefaultValues<T>undefined初回レンダリング時にフィールドへ設定するデフォルトのフォーム値
dataTundefined制御されたフォーム値。外部フォーム state 管理に使用します
childrenBlocksOverrideundefinedデフォルトレンダリングを上書きするカスタムブロックコンポーネント
classNamestringundefinedフォームコンテナのスタイル用追加 CSS クラス名

Note: このコンポーネントは、一般的な HTML form 要素の props も追加で継承します。

サブコンポーネント​

SignUp コンポーネントは複数のサブコンポーネントを提供します。すべてのサブコンポーネントは、メインコンポーネントのコンテキストからデフォルト値を受け取り、props を通じてそれらを上書きできます。

SignUp.SignUpTitle​

プロパティ型デフォルト説明
childrenReactNodeコンテキストからタイトルコンテンツ
sizeenum"2XL"タイトルの Typography サイズ
typeenum"heading"Typography の type
colorenum"low-emphasis"タイトルのカラーテーマ
weightenum"bold"タイトルの weight
classNamestringundefinedスタイル用の追加 CSS クラス名

SignUp.EmailField​

プロパティ型デフォルト説明
namestring"email"フォーム data と検証に使用されるフィールド名
labelstring"Email"入力の上に表示されるフィールドラベル
placeholderstring"Please enter your email"フィールドが空のときに表示されるプレースホルダーテキスト
isRequiredbooleantrueフィールドが必須かどうか（赤いアスタリスクを表示します）
isDisabledbooleanundefined入力が無効かどうか
errorTextstringundefined入力のエラーテキスト
classNamestringundefinedスタイル用の追加 CSS クラス名

Note: このコンポーネントは、一般的な HTML input 要素の props も追加で継承します。

SignUp.PasswordField​

プロパティ型デフォルト説明
namestring"password"フォーム data と検証に使用されるフィールド名
labelstring"Password"入力の上に表示されるフィールドラベル
placeholderstring"Please enter your password"フィールドが空のときに表示されるプレースホルダーテキスト
inputTypestring"password"入力タイプ。通常は "password" または "text"
isRequiredbooleantrueフィールドが必須かどうか（赤いアスタリスクを表示します）
isDisabledbooleanundefined入力が無効かどうか
errorTextstringundefined入力のエラーテキスト
classNamestringundefinedスタイル用の追加 CSS クラス名

Note: このコンポーネントは、一般的な HTML input 要素の props も追加で継承します。

SignUp.TermsOfUse​

HTML input 要素のすべての props を継承し、次を追加します:

プロパティ型デフォルト説明
namestring"agreesUserAgreement"フォーム data と検証に使用されるフィールド名
labelReactNodeデフォルトの利用規約リンク利用規約チェックボックスラベルの内容。通常はリンクを含みます
isRequiredbooleantrueフィールドが必須かどうか（赤いアスタリスクを表示します）
isDisabledbooleanundefined入力が無効かどうか
errorTextstringundefined入力のエラーテキスト
classNamestringundefinedスタイル用の追加 CSS クラス名

SignUp.PrivacyPolicy​

HTML input 要素のすべての props を継承し、次を追加します:

プロパティ型デフォルト説明
namestring"agreesPrivacyPolicy"フォーム data と検証に使用されるフィールド名
labelReactNodeデフォルトのプライバシーポリシーリンクプライバシーポリシーチェックボックスラベルの内容。通常はリンクを含みます
isRequiredbooleantrueフィールドが必須かどうか（赤いアスタリスクを表示します）
isDisabledbooleanundefined入力が無効かどうか
errorTextstringundefined入力のエラーテキスト
classNamestringundefinedスタイル用の追加 CSS クラス名

SignUp.SignUpButton​

プロパティ型デフォルト説明
childrenReactNode"Sign Up"ボタンテキストの内容
classNamestringundefinedスタイル用の追加 CSS クラス名
fillenum"fill"ボタンの塗りつぶしスタイル
iconenumundefinedボタン左側の任意のアイコン
iconColorenumundefined左側アイコンの色。指定されない場合は、fill タイプのデフォルト色が使用されます。
isDisabledbooleanfalseボタンが無効で使用できないかどうか
onClickfunctionundefinedボタンクリックを処理する関数
sizeenum"M"ボタンの縦サイズ
textAlignenum"center"ボタン内でのアイコンとテキストの位置
textColorenum"default"ボタンテキストの色
textEmphasisbooleanfalseボタンテキストの太さ
textSizeenum"M"ボタンテキストのサイズ
typeenum"submit"ボタンの用途（HTML type に影響します）

SignUp.GotoSignIn​

HTML div 要素のすべての props を継承し（children を除く）、次を追加します:

プロパティ型デフォルト説明
childrenReactNodeデフォルトのサインインリンクサインインリンクセクションの内容。通常はアンカータグを含みます
classNamestringundefinedスタイル用の追加 CSS クラス名

🔧 TypeScript サポート​

包括的な型定義を備えた完全な TypeScript サポート:

import {SignUp} from '@nodeblocks/frontend-signup-block';
//in future we will not use react-hook-form, we will use our own form handling
import {UseFormClearErrors, UseFormGetValues, UseFormSetError} from 'react-hook-form';

// Default form data structure
interface DefaultSignUpFormData {
  email?: string;
  password?: string;
  agreesPrivacyPolicy?: boolean;
  agreesUserAgreement?: boolean;
}

// Extend with custom fields
interface CustomSignUpFormData extends DefaultSignUpFormData {
  firstName?: string;
  lastName?: string;
  phone?: string;
}

const MySignUpForm = () => {
  const handleSubmit = (formData: CustomSignUpFormData) => {
    console.log('Form submitted:', formData);
    // Handle form submission
  };

  const handleChange = (
    setError: UseFormSetError<CustomSignUpFormData>,
    getValues: UseFormGetValues<CustomSignUpFormData>,
    clearErrors: UseFormClearErrors<CustomSignUpFormData>,
  ) => {
    const values = getValues();

    // Custom validation
    if (values.email && !values.email.includes('@')) {
      setError('email', {message: 'Invalid email format'});
    } else {
      clearErrors('email');
    }
  };

  return (
    <SignUp<DefaultSignUpFormData>
      onSubmit={handleSubmit}
      onChange={handleChange}
      defaultData={{email: 'user@example.com'}}>
      <SignUp.SignUpTitle>Create Account</SignUp.SignUpTitle>
      <SignUp.EmailField />
      <SignUp.PasswordField />
      <SignUp.TermsOfUse
        name="agreesUserAgreement"
        label={
          <span>
            I agree to the <a href="#terms">Terms of Service</a>
          </span>
        }
      />
      <SignUp.PrivacyPolicy
        name="agreesPrivacyPolicy"
        label={
          <span>
            I agree to the <a href="#privacy">Privacy Policy</a>
          </span>
        }
      />
      <SignUp.SignUpButton>Register</SignUp.SignUpButton>
      <SignUp.GotoSignIn>
        <span>
          Already have an account? <a href="#signin">Sign In</a>
        </span>
      </SignUp.GotoSignIn>
    </SignUp>
  );
};

React、TypeScript、モダンなウェブ標準を使用して❤️で構築されました。