npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@smartface/extension-barcode

v5.0.0

Published

Smartface Extension Barcode

Downloads

3

Readme

Barcode Scanner Extension

NPM Twitter: @Smartface_io License

Installation

Smartface Barcode Extension can be installed via npm easily from our public npm repository. Execute this command on your scripts directory:

yarn add @smartface/extension-barcode

How to use

  • Import extension with
import { BarcodeScanner } from "@smartface/extension-barcode";
  • Create an instance of BarcodeScanner. Result will be handled in onResult callback.
const barcodeScanner = new BarcodeScanner({
    layout: myFlexLayout, // Required
    width: 200, // Required
    height: 200, // Required
});
barcodeScanner.on(BarcodeScanner.Events.Result, ({ barcode }) => {
    let { text, format } = barcode;
    alert(text);
    barcodeScanner.stopCamera();
    barcodeScanner.hide();
})
  • Finally call show method with no parameters. Camera permissions must be granted before running show method.
barcodeScanner.show();

Barcode Format Type

Supported Formats:

Barcode.FormatType.AZTEC
Barcode.FormatType.CODABAR
Barcode.FormatType.CODE_39
Barcode.FormatType.CODE_93
Barcode.FormatType.CODE_128
Barcode.FormatType.DATA_MATRIX
Barcode.FormatType.EAN_8
Barcode.FormatType.EAN_13
Barcode.FormatType.ITF
Barcode.FormatType.MAXICODE
Barcode.FormatType.PDF_417
Barcode.FormatType.QR_CODE
Barcode.FormatType.RSS_14
Barcode.FormatType.RSS_EXPANDED
Barcode.FormatType.UPC_A
Barcode.FormatType.UPC_E
Barcode.FormatType.UPC_EAN_EXTENSION

Barcode format can be retrieved like this.

import { BarcodeScanner } from "@smartface/extension-barcode";
barcodeScanner.onResult = ({ barcode }) => {
    if (barcode.format === BarcodeScanner.Format.QR_CODE) {
        console.log("This is a qr code");
    }
};
barcodeScanner.on(BarcodeScanner.Events.Result, ({ barcode }) => {
    if (barcode.format === BarcodeScanner.Format.QR_CODE) {
        console.log("This is a qr code");
    }
})

Notes

  • If there is a need for closing the scanner, it needs to be implemented by the developer. For Android onBackButtonPressed needs to be implemented.
  • Scanner does not hide automatically when scanned
  • A scanner instance can be used only for once per image scan. For each scan action, a new BarcodeScanner instance should be created and used
  • For Android, if there is an active textbox (keyboard is visible), developer needs to close the keyboard before showing the scanner.
  • It is advised to call show method with a timeout value for rendering performance.

Permissions

For iOS, you have to add camera permission to Info.plist.

<key>NSCameraUsageDescription</key>
<string>${PRODUCT_NAME} Camera Usage</string>

For Android, you have to add camera permission to AndroidManifest.xml.

<uses-permission android:name="android.permission.CAMERA" />
<uses-feature android:name="android.hardware.camera" />
<uses-feature android:name="android.hardware.camera.autofocus" />

Sample

There are some examples in sample folder. You can use them.

Credits

This barcode library is based on:

Need Help?

Please submit an issue on GitHub and provide information about your problem.

Code of Conduct

We are committed to making participation in this project a harassment-free experience for everyone, regardless of the level of experience, gender, gender identity and expression, sexual orientation, disability, personal appearance, body size, race, ethnicity, age, religion, or nationality. Please read and follow our Code of Conduct.

License

This project is licensed under the terms of the MIT license. See the LICENSE file. Within the scope of this license, all modifications to the source code, regardless of the fact that it is used commercially or not, shall be committed as a contribution back to this repository.