optimatica-meters-react

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

Playground

Попробуйте компонент в браузере: React SDK Playground.

Установка

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)}
    />
  )
}

Props

Prop	Тип	По умолчанию	Описание
apiKey	string	—	API-ключ (JWT)
showApiKeyInput	boolean	auto	Поле ввода ключа
showRawJson	boolean	false	Показать сырой JSON-ответ
disabled	boolean	false	Отключить UI
theme	'light' | 'dark' | 'auto'	'auto'	Цветовая тема. auto следует prefers-color-scheme
loadFonts	boolean	false	Подгрузить шрифты дизайна (Space Grotesk, IBM Plex) с Google Fonts

Темы и шрифты

Виджет поставляется в двух темах из дизайна — тёмной и светлой. theme="auto" (по умолчанию) следует prefers-color-scheme:

<MeterPhotoAnalyzer apiKey={apiKey} theme="dark" />

Типографика построена на Space Grotesk (заголовки) и IBM Plex Mono/Sans. По умолчанию используется системный стек со шрифтовыми фолбэками без внешних запросов. Для точного вида макета подключите шрифты на своей странице либо передайте loadFonts — виджет один раз добавит <link> на Google Fonts.

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([file1, file2])

responses — массив результатов по всем фото; response хранит единственный результат (или null при пакетной отправке).

Стили

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

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

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