React Usage

SealKit is designed as a drop-in React component. The main component is SealCanvas, which handles rendering, layout, and export through a forwarded ref.

Basic Component

import { SealCanvas } from '@luohuax/seal-kit'

function App() {
  return <SealCanvas preset="mitomein" text="山田太郎" />
}

Ref and Export

You can access the export method through a ref:

import { useRef } from 'react'
import { SealCanvas, type SealCanvasRef } from '@luohuax/seal-kit'

function App() {
  const sealRef = useRef<SealCanvasRef>(null)

  const handleDownload = async () => {
    const dataUrl = await sealRef.current?.exportPng({
      width: 1024,
      transparent: true
    })

    if (dataUrl) {
      const link = document.createElement('a')
      link.href = dataUrl
      link.download = 'seal.png'
      link.click()
    }
  }

  return (
    <div>
      <SealCanvas ref={sealRef} preset="mitomein" text="山田太郎" />
      <button onClick={handleDownload}>Download PNG</button>
    </div>
  )
}

Overriding Preset Defaults

Every property of a preset can be overridden:

<SealCanvas
  preset="mitomein"
  text="山田太郎"
  color="#cc0000"
  size={240}
  border="double"
  bleed
/>

TypeScript Support

All props and ref types are exported from the package:

import type { SealCanvasProps, SealCanvasRef } from '@luohuax/seal-kit'

Notes

• Fonts must be loaded before they are used. See the Fonts guide.
• SealCanvas is a forward-ref component. Make sure to import the ref type correctly.