pella-bc-scanner

A QR / Barcode scanner React component.

Peer Dependencies

• sash-framework
• React v17+

v1 -> v2 Migration Guide

v2 seen a complete refactor of the codebase for performance improvements. A couple of changes here:

1. Component has been renamed from PellaBCScanner to BarCodeScanner.
2. cameraOption prop has been retired. It now functions as selection mode always, auto has been removed.

// Old
<PellaBCScanner
  isOpen={isOpen}
  setIsOpen={close}
  userClose={close}
  setData={onScan}
  cameraOption='selection'
  />

// New
<BarCodeScanner
  isOpen={isOpen}
  setIsOpen={close}
  userClose={close}
  setData={onScan}
  />

Getting Started

Ensure your project has an .npmrc file with the following:

registry=https://nexus.pella.com/repository/npm-group

Afterwards:

npm install pella-bc-scanner @pella/sash-framework

Usage

The component is fully typed, meaning you can hover over a propname to see intellisense data.

import { BarCodeScanner } from 'pella-bc-scanner';

...

return (
  <BarCodeScanner
    isOpen={isOpen}
    userClose={toggleScanner}
    setIsOpen={toggleScanner}
    setData={setData}
  />
)

Development

To develop within this package:

npm run start

This will concurrently run:

• a file watching script that rebuilds the dist folder when file changes are made within the lib directory.
• a local React development server from the harness directory.

The idea is to make changes to the package itself in the lib folder, then test those changes work in a React project from the harness folder.

TypeScript

There are two separate tsconfig.json files in this project. Each one has a different job.

• tsconfig.json Used by the IDE + Intellisense to typecheck the JavaScript files.
• tsconfig.build.json Emits TS definition files (.d.ts) to the dist folder from JSDoc types found within JavaScript files.

Updating & Versions

We can use the npm-version process when updating this repo. Running the npm version command will automatically use the preversion, version, and postversion scripts found in the package.json to verify the project, build distribution files, and push to the remote branch while updating the package version based on the version increment type.

• MAJOR - You've made a major change that is not backwards compatible and could break existing apps.
• MINOR - You've added new functionality to the project, but did not make any breaking changes.
• PATCH - You've made a fix to the service, but didn't introduce any new features or breaking changes.

// example bumping minor version
npm version patch -m 'fix some bug'

// example bumping minor version
npm version minor -m 'add npmjs registry support'

// example bumping major version
npm version major -m 'did some big thing that changes functionality'