optimatica-meters-react

React компонент MeterPhotoAnalyzer — загрузка, камера, отправка и отображение результата распознавания счётчика. Тот же UX, что и Vue-версия. Поддерживает несколько фото за один раз (до 10): мультивыбор файлов, drag-and-drop пачкой и дозапись кадров с камеры.

Установка

npm install optimatica-meters-react optimatica-meters

Peer dependencies: react, react-dom (^18 || ^19)

Использование

import { MeterPhotoAnalyzer } from 'optimatica-meters-react'
import 'optimatica-meters-react/style.css'

export function App() {
  return (
    <MeterPhotoAnalyzer
      apiKey="eyJhbGci..."
      onSuccess={(result) => console.log(result.meter)}
    />
  )
}

Глобальный ключ можно задать один раз через configureZhkhSdk:

import { configureZhkhSdk } from 'optimatica-meters-react'

configureZhkhSdk({ apiKey: 'eyJhbGci...' })

Props

| Prop | Тип | По умолчанию | Описание | |------|-----|--------------|----------| | apiKey | string | — | API-ключ (JWT) | | showApiKeyInput | boolean | auto | Поле ввода ключа | | showRawJson | boolean | false | Показать сырой JSON-ответ | | disabled | boolean | false | Отключить UI |

Callbacks

| Callback | Payload | |----------|---------| | onAnalyzeStart | File (по разу на каждое фото) | | onSuccess | { success: true, meter } (по разу на каждый распознанный счётчик) | | onError | string | | onComplete | (response, error) — response только при одном фото | | onResults | AnalyzeMeterResponse[] — массив результатов по всем фото |

Hook

import { useMeterAnalyze } from 'optimatica-meters-react'

const { isLoading, response, responses, error, analyze, analyzeMany, reset } =
  useMeterAnalyze()

await analyze(file)            // одно фото
await analyzeMany([f1, f2])    // несколько фото

Стили

import 'optimatica-meters-react/style.css'

Возможности UI

• Вкладки «Загрузка» / «Камера»
• Drag-and-drop
• getUserMedia + захват кадра
• Мобильная галерея через <input capture="environment">

Документация

Полная документация и Playground: apps/docs.