ShipMyForm

shipmyform-js

fetch を介して ShipMyForm にフォームを送信するためのクライアントライブラリです。型付きの結果とフレームワーク用バインディングを提供します。

パッケージ	用途
@shipmyform/core	フレームワークに依存しないクライアントとプログレッシブエンハンスメント
@shipmyform/react	useSubmit フック
@shipmyform/vue	useSubmit コンポーザブル
@shipmyform/svelte	ストアと use:shipmyform アクション
@shipmyform/solid	createSubmit プリミティブ
@shipmyform/astro	<ShipMyForm> コンポーネント

クイックスタート

import { createClient } from '@shipmyform/core'

const form = createClient({ formId: 'YOUR_FORM_ID' })
const result = await form.submit({ email: '[email protected]', message: 'Hello' })

if (!result.ok) console.error(result.error, result.message)

React：

import { useSubmit } from '@shipmyform/react'

function Contact() {
  const { submit, submitting, succeeded, error } = useSubmit({ formId: 'YOUR_FORM_ID' })

  if (succeeded) return <p>Thanks!</p>

  return (
    <form onSubmit={(e) => (e.preventDefault(), submit(e.currentTarget))}>
      <input name="email" type="email" required />
      <textarea name="message" required />
      <button disabled={submitting}>Send</button>
      {error && <p>{error.message}</p>}
    </form>
  )
}

不正利用対策

ShipMyForm のエンドポイントは公開されており、クロスオリジンであるため、取得する CSRF トークンはありません。リクエストは、オリジンの許可リスト、ハニーポットフィールド（_gotcha）、任意の Cloudflare Turnstile トークン、レート制限によって審査されます。クライアントはハニーポットを空のままにし、トークンを渡すと Turnstile トークンを転送します。また、任意の tokenProvider を介して署名付きタイムトラップトークンを取得できます。

リリース

Changesets を使用して公開しています。プルリクエストに Changeset を含めてください。

pnpm changeset

main へのマージ後、「Version Packages」プルリクエストが作成されます。これをマージするとバージョンが更新され、npm に公開されます。

ライセンス

MIT