normalize-japanese-addresses のサンプル React App

App.tsx

import React, { useCallback, useState } from 'react'
import { normalize, NormalizeResult } from '@geolonia/normalize-japanese-addresses'

interface Result {
  input: string
  normalized: NormalizeResult
}

const App: React.FC = () => {
  const [ result, setResult ] = useState<Result | undefined>(undefined)

  const onSubmit = useCallback(async (ev: React.FormEvent) => {
    ev.preventDefault()
    const inputText = (ev.currentTarget as any)['input']?.value
    if (!inputText) return
    const normalized = await normalize(inputText)

    setResult({
      input: inputText,
      normalized,
    })
  }, [])
  return (
    <div className="container">
      <form onSubmit={onSubmit} className="mb-3 mt-5">
        <div className="mb-3">
          <label htmlFor="input" className="form-label">住所</label>
          <input type="text" name="input" className="form-control" />
        </div>
        <button type="submit" className="btn btn-primary">正規化</button>
      </form>
      { typeof result !== 'undefined' && <div>
        <p>{result.input}</p>
        <pre>{JSON.stringify(result.normalized, undefined, 2)}</pre>
      </div> }
    </div>
  )
}

export default App