電子署名（手書き）

用途

Canvas で手書き署名入力 → PNG/SVG出力。契約書添付に。

特徴

• タッチ/マウス対応
• クリア
• 保存

コード（コピペ用）

'use client';
import SignaturePad from 'signature_pad';
import { useEffect, useRef } from 'react';

export function SignatureInput({ onSave }: { onSave: (dataUrl: string) => void }) {
  const ref = useRef<HTMLCanvasElement>(null);
  const padRef = useRef<SignaturePad | null>(null);
  useEffect(() => {
    if (ref.current) padRef.current = new SignaturePad(ref.current);
  }, []);
  return (
    <div>
      <canvas ref={ref} width={400} height={150} style={{ border: '1px solid #333' }} />
      <button onClick={() => padRef.current?.clear()}>クリア</button>
      <button onClick={() => onSave(padRef.current!.toDataURL('image/png'))}>保存</button>
    </div>
  );
}

使い方

対象プロジェクトに該当ファイルをコピーして、props を流し込むだけ。

注意事項

• 依存パッケージを忘れず追加