SealCanvas

SealCanvas is the primary React component for rendering a seal. It combines a preset template with user-provided values and renders the result on a Konva canvas.

Import

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

Props

Prop	Type	Description
preset	PresetName	Built-in template: mitomein, dateStamp, kakuin, tenkoku.
text	string | string[]	Seal text. String characters are arranged vertically; array items are rows.
color	string	Ink color.
fontFamily	string	Font family name. Must be registered or available in GOOGLE_FONT_MAP.
size	number | { width: number; height: number }	Render canvas size.
shape	"circle" | "square"	Outer seal shape.
border	"single" | "double" | "none"	Border style.
borderThickness	number	Border thickness in pixels.
cornerRadius	number	Radius for rounded square seals.
textDirection	"horizontal" | "vertical"	Text direction.
invert	boolean	White text on colored background.
bleed	boolean	Ink bleed texture effect.
previewScale	number	On-screen preview scale.
singleFieldAutoGrid	boolean	Auto-compute grid layout for single-field seals such as kakuin.
dateStamp	{ year?, month?, day?, topText?, bottomText? }	Data for the date stamp preset.

Ref Methods

Use useRef<SealCanvasRef>() to access export methods.

Method	Signature	Description
exportPng	(options?: { width?, height?, transparent? }) => Promise<string>	Exports the seal as a PNG data URL.

Example

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

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

  return (
    <div>
      <SealCanvas
        ref={ref}
        preset="mitomein"
        text="山田太郎"
        color="#cc0000"
        size={200}
      />
      <button onClick={async () => {
        const url = await ref.current?.exportPng({ width: 1024 })
        console.log(url)
      }}>
        Export
      </button>
    </div>
  )
}

Notes

• preset provides all defaults. Any prop you pass overrides the preset value.
• Fonts must be loaded before they render correctly. See Fonts.