ShipMyForm

shipmyform-js

用于通过 fetch 向 ShipMyForm 提交表单的客户端库，提供类型化结果和框架绑定。

Package	用途
@shipmyform/core	与框架无关的客户端和渐进增强
@shipmyform/react	useSubmit hook
@shipmyform/vue	useSubmit 组合式函数
@shipmyform/svelte	store 和 use:shipmyform action
@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 发布。在你的 PR 中添加一个 changeset：

pnpm changeset

合并到 main 后，会创建一个“Version Packages”PR；合并该 PR 后会更新版本并发布到 npm。

许可证

MIT