ViaCheck Check Viewer

Transversal React component to display a check image with front/back toggle and a draggable zoom effect (double click on the image or the zoom button). Extracted from the check-processing flow so it can be reused across ViaCheck micro-fronts and packages.

Installation

npm i -S -E @viamericas/viacheck-check-viewer

Please review webpack.config.js on externals property to check what packages need to install separately because they are not included in the package.

Usage

Import the package

import CheckViewer from '@viamericas/viacheck-check-viewer';

Component implementation

<CheckViewer
  frontImage={frontImageBase64}
  backImage={backImageBase64}
  onChangeSide={side => console.log(side)}
  onToggleZoom={zoomed => console.log(zoomed)}
/>

Props

| Prop | Type | Required | Description | | -------------- | --------------------- | -------- | --------------------------------------------------------------------------------------------------------- | | frontImage | string | no | Front image. Accepts raw base64 (no prefix), a full data: URL, or an http(s)/relative URL. | | backImage | string | no | Back image. Same formats as frontImage. | | imageType | string | no | Mime subtype used when the image is raw base64. Default jpeg. | | side | 'front' \| 'back' | no | Controlled side. When provided, the host controls which side is shown. | | initialSide | 'front' \| 'back' | no | Uncontrolled initial side. Default front. | | onChangeSide | func | no | Called with the new side ('front'/'back') when the user toggles it. | | onToggleZoom | func | no | Called with the new zoom state (boolean) when the user toggles zoom. | | ux | object | no | CSS class map override. Defaults to defaultStyles (see src/core/styles/ux.js). | | t2 | func | no | i18n translation function. Falls back to internal useTranslation('translation'). | | className | string | no | Wrapper className. Default viacheck-check-viewer. |

Language

The component uses the checkViewer namespace with the keys front, back and zoom:

{
  "checkViewer": {
    "front": "Front",
    "back": "Back",
    "zoom": "Zoom"
  }
}

Pass your own t via t2, or rely on the host react-i18next instance.

Check dev-test/locales folder for EN/ES examples.

Styles

The component ships its own SCSS (src/core/styles/checkViewer.scss) with the zoom/flip styles. You can override any class through the ux prop.

Font Awesome is used for the front/back/zoom icons (fas fa-arrow-circle-left, fas fa-arrow-circle-right, fas fa-search). Make sure it is available in the host, or override the icon classes via ux.

Local development

npm run start:dev

Opens the demo at http://localhost:9000 (see dev-test/App.js).

How to publish the project

• npm login
• npm run build
• npm publish