Regula React UI components

This package contains React UI components for Regula products and TypeScript definitions for Regula Document Reader SDK.

Document-reader processing result tabs

Here is an example of using components to display the results of document-reader processing.

import { FC } from 'react'
import { createRoot } from 'react-dom/client'
import {
  DocReaderContainer,
  Details,
  Info,
  Graphics,
  Rfid,
  ResponseViewer,
  RequestViewer,
  Logs,
  PortraitsComparison,
  Tabs,
} from '@regulaforensics/ui-components'


interface ProcessingResultsProps {
  response: unknown
  request: any
  language: string
}

const ResultsTab = () => (
  <>
    <Details />
    <Info />
    <Graphics />
    <Rfid />
    <PortraitsComparison />
  </>
)

const ProcessingResultTabs: FC<ProcessingResultsProps> = ({ response, request, language }) => (
  <DocReaderContainer response={ response } request={ request } language={ language }>
    <Tabs
      type={ 'card' }
      items={[
        { id: 'Results', label: 'Results', children: <ResultsTab /> },
        { id: 'Request', label: 'Request', children: <RequestViewer /> },
        { id: 'Response', label: 'Response', children: <ResponseViewer /> },
        { id: 'Logs', label: 'Logs', children: <Logs /> }
      ]}
    />
  </DocReaderContainer>
)

const RESPONSE = YOUR_RESPONSE_DATA
const REQUEST = YOUR_REQUEST_DATA

const Results = () => (
  <ProcessingResultTabs 
    response={ RESPONSE } 
    request={ REQUEST } 
    language={ 'en' } 
  />
)

const root = createRoot(document.getElementById('root'));
root.render(<Results />);

Importing a package

By default, styles are automatically imported into the package build and there is no need to make additional style imports:

import { Collapse } from '@regulaforensics/ui-components'

But there are times when you need to control the style import process yourself:

import '@regulaforensics/ui-components/styles' // connect styles where you need to

import { Collapse } from '@regulaforensics/ui-components/core' // use the components

Document reader typings

The package also contains TypeScript definitions for Regula Document Reader SDK. These definitions are constructed using class transformers and class validators. With their help, you can transform the raw response from the Regula Document Reader SDK into a typed one:

import { ProcessResponse } from '@regulaforensics/ui-components/typings'

const typedResponse = ProcessResponse.fromPlain(rawResponse)