pella-bc-scanner
A QR / Barcode scanner React component.
Peer Dependencies
v1 -> v2 Migration Guide
v2 seen a complete refactor of the codebase for performance improvements. A couple of changes here:
- Component has been renamed from
PellaBCScanner
to BarCodeScanner
. cameraOption
prop has been retired. It now functions as selection
mode always, auto
has been removed.
<PellaBCScanner
isOpen={isOpen}
setIsOpen={close}
userClose={close}
setData={onScan}
cameraOption='selection'
/>
<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.
npm version patch -m 'fix some bug'
npm version minor -m 'add npmjs registry support'
npm version major -m 'did some big thing that changes functionality'