# @team_yumi/code-scanner
> This library was generated with [Nx](https://nx.dev).
Latest version **0.0.16** (published 2025-07-24) · 0 weekly downloads
## Install
```sh
npm install @team_yumi/code-scanner
pnpm add @team_yumi/code-scanner
yarn add @team_yumi/code-scanner
bun add @team_yumi/code-scanner
```
## Health
**Score 35/100 (D)** — status: maintenance-mode.
Positive: has types; esm support; no vulnerabilities.
Warnings: low downloads; pre 1.0.
Negative: stale; low maintenance score.
## Facts
| | |
|---|---|
| Version | 0.0.16 |
| Published | 2025-07-24 |
| First published | 2023-07-11 |
| Weekly downloads | 0 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 5 |
| Unpacked size | 77.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | charlie-cencox, maykelg2005, dmunozgaete, jcgomezcorrea, bqsistemas |
## Links
- npm: https://www.npmjs.com/package/@team_yumi/code-scanner
- npm.io page: https://npm.io/package/@team_yumi/code-scanner
## Dependencies (5)
- [react](https://npm.io/package/react.md) ^16.14.0
- [@capacitor/core](https://npm.io/package/@capacitor/core.md) ^4.8.1
- [@team_yumi/ramen](https://npm.io/package/@team_yumi/ramen.md) ^0.1.0
- [@capacitor/keyboard](https://npm.io/package/@capacitor/keyboard.md) 4.1.1
- [@capacitor-community/barcode-scanner](https://npm.io/package/@capacitor-community/barcode-scanner.md) ^3.0.3
## Recent versions
- 0.0.16 (latest) — 2025-07-24
- 0.0.16-next.20250724-38bccc3-f05f14e2b7fe89cb1d6ed57b8c125fc5 (next) — 2025-07-24
- 0.0.15-next.20240522-77b6069-d3ef866d79c9f99d46b9079a923c68ed — 2024-05-22
- 0.0.15-next.20231025-29e2af9-ca80de48998d192b4d348505ba3565fb — 2023-10-25
- 0.0.15-next.20231025-e86ea4f-133668283f4a34c71fac716d3bc58075 — 2023-10-25
- 0.0.15-next.20231025-6158157-2d4f674936c135aec1f7da041750a144 — 2023-10-25
- 0.0.15-next.20231024-0d8cfeb-4dd672e30df696c1c9dea7ed99cc8c83 — 2023-10-24
- 0.0.15-next.20231024-d241c6e-fe4407843e351b97976acafcb876b044 — 2023-10-24
- 0.0.15-next.20231023-cd2863b-9dfe627634b3145cf193f28ab5a7397c — 2023-10-23
- 0.0.15-next.20231023-bc19909-14c0a519d3c5bf0e050564cd3e3a779c — 2023-10-23
- 0.0.15-next.20231023-2333722-0317c4ec13b96663986a657e2fd42f47 — 2023-10-23
- 0.0.14 — 2023-10-10
- 0.0.14-next.20231010-fd99acf-6a81b1263d751a1ea4fdac81d1867d73 — 2023-10-10
- 0.0.11 — 2023-10-10
- 0.0.11-next.20231010-2d1fd60-134451a68c356787380fd52f74a3e0ca — 2023-10-10
- … 24 more at https://npm.io/package/@team_yumi/code-scanner/versions
## README
# code-scanner (using Capacitor)
This library was generated with [Nx](https://nx.dev).
## 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
```xml
+ NSCameraUsageDescription
+ To be able to scan barcodes
```
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
+
+
```
## 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.
```tsx
import { ScannerHoC } from '@team_yumi/code-scanner';
import '@team_yumi/code-scanner/index.css';
const ToolPageWrapper: React.FC = (props) => {
return (
{/* Page */}
)
}
```
## 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:
```ts
(code: string) => void
```
so to use it you should doit like this:
```ts
...
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.
---
_Source: https://npm.io/package/@team_yumi/code-scanner · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._