スキャン入力ScanInputExperimental

Barcode / QR scan field: a scan gun (or hand entry) types a code then Enter; it fires `onScan`, announces the result, auto-clears and re-focuses for the next scan, and keeps an optional running feed. For POS, stocktake, returns and goods-receiving — scan → match → tick up.

プレビュー

ハンディスキャナで読み取るか、コードを入力して Enter。例: 4901234567894 / 0000(対象外)

スキャン履歴

—

  • 有機ほうじ茶 500ml検品 0 / 発注 24-24 不足
  • 玄米おにぎり検品 0 / 発注 12-12 不足
  • 豆乳 1L検品 0 / 発注 6-6 不足

Props

表は横にスクロールできます
プロパティ型初期値説明
onScan(code: string) => ScanResult | void-Fires when a code is committed (scan gun types then Enter, or manual Enter). Return { ok, message } to drive the announcement, tone and feed.
labelReactNode-Accessible label rendered above the field.
descriptionReactNode-Helper text rendered under the field.
retainFocusboolean-Re-focus the field after each scan so a scan gun fires continuously. Default true.
clearOnScanboolean-Clear the field after each scan. Default true.
lockMsnumber-Ignore repeat commits within this many ms (scan guns can double-fire). Default 150.
showFeedboolean-Render a running feed of recent scans (newest first). Default false.
feedLimitnumber-Max feed entries retained. Default 8.
iconReactNode-Leading adornment. Defaults to a barcode icon; pass null to hide.
assertiveboolean-Announce results assertively (role="alert" + aria-live="assertive") instead of politely — for safety-critical scanning where a mismatch must interrupt. Default false.
classNamestring-Additional CSS class names on the field wrapper.

Usage

import { ScanInput, type ScanResult } from "@gunjo/ui"

export function Example() {
  function handleScan(code: string): ScanResult {
    const line = lines.find((l) => l.jan === code)
    if (!line) return { ok: false, message: `発注に無い商品です（${code}）` }
    increment(line) // your state update
    return { ok: true, message: `${line.name} を1点 検品` }
  }

  return (
    <ScanInput
      label="バーコード / JAN をスキャン"
      placeholder="コードを入力して Enter"
      inputMode="numeric"
      onScan={handleScan}
      showFeed
    />
  )
}