code-scanner (using Capacitor)

This library was generated with Nx.

Instalation and Config

npm i @team_yumi/code-scanner

Config for iOS

For iOS you need to set a usage description in your info.plist file.

This can be done by either adding it to the Source Code directly or by using Xcode Property List inspector.

Adding it to the source code directly

Open up the Info.plist (in Xcode right-click > Open As > Source Code) With change the following

<dict>
+  <key>NSCameraUsageDescription</key>
+  <string>To be able to scan barcodes</string>
</dict>

NOTE: "To be able to scan barcodes" can be substituted for anything you like.

Adding it by using Xcode Property List inspector

Open up the Info.plist in Xcode (right-click > Open As > Property List) Next to "Information Property List" click on the tiny + button. Under key, type "Privacy - Camera Usage Description" Under value, type "To be able to scan barcodes" NOTE: "To be able to scan barcodes" can be substituted for anything you like.

More info here: https://developer.apple.com/documentation/bundleresources/information_property_list/nscamerausagedescription

Config for Android

Within your AndroidManifest.xml file, change the following:

<?xml version="1.0" encoding="utf-8"?>
<manifest
  xmlns:android="http://schemas.android.com/apk/res/android"
+  xmlns:tools="http://schemas.android.com/tools"
  package="com.example">

  <application
+    android:hardwareAccelerated="true"
  >
  </application>

+  <uses-permission android:name="android.permission.CAMERA" />

+  <uses-sdk tools:overrideLibrary="com.google.zxing.client.android" />
</manifest>

How to use

The package exports 2 elements : a ScannerHoC (higher order component) and a useScanner Hook.

ScannerHoc

The ScannerHoC component should be used on the root of your application. If you are using Ionic, you should put it wrapping your IonPage component. This is due the component hides the entire html root element and mounts its own.

Impotant Note:

Is important to import the index.css styles on the file where the HoC is imported.

import { ScannerHoC } from '@team_yumi/code-scanner';

import '@team_yumi/code-scanner/index.css';

const ToolPageWrapper: React.FC<IProps> = (props) => {
  return (
    <ScannerHoC>
      {/* Page */}
    </ScannerHoC>
  )
}

useScanner

The useScanner hook receives two optional function arguments, the first one is executed when the main button of the scanner is pressed, and the second one is executed when the back button of the scanner is pressed, that way you can create callbacks that executes when ever you press any of those buttons.

Also the useScanner gives a the startScan function. Once we execute this function all the magic begins and the scan reader component is mounted on the screen. To obtain the code scanned by the scanner you should pass a callback function to startScan as a parameter, this function must fulfill width the contract:

(code: string) => void

so to use it you should doit like this:

...
const { startScan } = useScanner(
  () => { console.log('This code executes when main button of scanner view is pressed') }, 
  () => { console.log('This code executes when back button of scanner view is pressed') }
);

const handleOnShowScannerClick = () => {
  if (startScan){
    startScan((scannedCode) => {
      // This function is executed when the barcode is scanned
      console.log(`This is the code scanned ${scannedCode}`)
    })
  }
}
...

Personalization

If you want to personalize the style of the component yo can use your own style file. Just use the same css-clases than the original.