React Barcode Scanner

Runs in the browser

Add barcode scanning to your React app: fully client-side processing, no backend required!

Simple, transparent pricing

No large up-front commitment. Unlimited devices. Cancel anytime. Free 14-day trial.

Built for developers

Zero dependencies. Works with all frameworks. Great docs for humans and agents alike.

Quick start: scan with the Popup Scanner

The fastest way to scan a barcode in React. No component to write, just call PopupScanner.scan() from an event handler and await the result.

The Popup Scanner is a configurable modal dialog over your app and closes as soon as a matching barcode is read. It's intentionally light, but still configurable enough to fit your app:

Customizable labels for user guidance. Defaults are localized to the browser language.
Colors to match your app's branding.
Audio and vibration feedback on each scan.
Custom detectionHandler to validate codes, or to keep the dialog open until all required barcodes have been scanned.

Check out our Popup Scanner guide, or dive directly into the React sample code to get started.

BarcodeReader: Add an embeddable scanner to your React app

For more fine-grained control over the integration, embed a BarcodeReader in your React app.

When scanning is central to a screen, for example a stock-taking view with the camera on top and scanned items below, embed the scanner using the BarcodeReader API. Our sample component wraps the BarcodeReader with a React component and ties its lifecycle to the component's lifecycle.

For detailed sample code, refer to our React sample code on Github. The repository contains a sample component as well as examples for single, multiple and repeated scanning use cases.

Install and initialize

Install from NPM. Our SDK has zero dependencies, and we use Trusted and Staged Publishing.

➜ npm i @pixelverse/strichjs-sdk

Before scanning, you need to initialize the SDK with your license key:

await StrichSDK.initialize('your-license-key');

You'll need a license key: Start a free trial and create one in the Customer Portal. License keys are scoped to your app URLs: localhost and private IP ranges are always included, so local development works out of the box.

Trusted in production

“We tried a number of different libraries for barcode scanning but always had compatibility issues. With STRICH we got fast, reliable scanning with no issues. Integration was easy, we were up and running in production in a day. We couldn’t recommend it more!”

Cameron Myers, Web Dev @ Brooklyn Public Library

“We did an extensive analysis on commercial barcode scanner SDKs and STRICH provided the best value for performance. Alex was also great to work with and quick to respond to questions.”

Johny Ho, Dev Team Lead @ Thoughtbot

“We tried a lot of other libraries but none was as good right from the start as STRICH. Thanks to the detailed documentation it was super easy to integrate the library into an existing ticket scanner web app.”

Dominik Schilling, Web Eng @ required

Not convinced? See how companies like Brooklyn Public Library, Swiss Railways (SBB) and Zeercle use STRICH for their scanning processes, or read our article on Barcode scanning in web apps.

React tips

Implementation guidance and some common pitfalls to avoid.

Initialize the SDK before the user needs it

Calling StrichSDK.initialize() before using PopupScanner or BarcodeReader. Initialization may perform an online license check, so be sure to do it as early as possible (app startup), so the scanner opens without delay.

Always destroy the BarcodeReader

The BarcodeReader holds the camera. If it isn't destroyed on unmount, the next initialization will fail because the camera is still in use. PopupScanner manages this automatically.

Disable StrictMode

In development, StrictMode mounts, unmounts and remounts every component to surface side-effects. If you're using BarcodeReader, we recommend disabling StrictMode.

Keep the host element's size fixed

The scanner's container must use position: relative and a fixed size while scanning. Give it an explicit height (e.g. 300px) rather than letting it grow or shrink with the content around it, such as the list of scanned items.

Stop/start instead of remounting

For flows with user interaction between multiple scans, such as confirming each item, considering calling stop() and start() on the BarcodeReader. That way the camera stays open, and scanning resumes instantly. The React sample code exposes both methods through useImperativeHandle.

Next.js and lazy loading

Scanner components use the camera and must run in the browser: mark them with use client. STRICH bundles its WebAssembly engine, so if scanning is only used on some pages, load the SDK lazily with a dynamic import or next/dynamic to keep it out of your initial bundle.

Frequently asked questions

Is there a React component package?

STRICH has zero dependencies and works with any framework. The Popup Scanner needs no component at all, and the React sample code is all it takes to embed the scanner. Copy it into your project and adapt it, or tell your agent to do it.

Does it work with Next.js?

Next.js is supported. Mark scanner components as client components ('use client') and load the SDK only in the browser, e.g. with a dynamic import().

Which React versions are supported?

Any recent React version works. STRICH doesn't place any requirements on the web framework it runs on.

Does it include TypeScript types?

Yes. The SDK ships with full TypeScript definitions.

Does it work with React Native?

Some of our customers use STRICH in React Native apps with the react-native-webview package. But it's not something we officially support. We think there are more straightforward options for React Native.

Is there a free trial?

Yes, we offer a 14-day free trial. A credit card or PayPal is required to start the trial, but you won't be charged if you cancel before it ends.

How much does STRICH cost?

Plans start at €99/month for up to 10'000 scans, with unlimited devices and applications. Business and Enterprise licenses have flat annual pricing with unlimited scans and devices. See pricing.

Does barcode data leave the device?

No. Barcodes are decoded on the device, in the browser. The SDK only uses connectivity to perform license check and track usage, never barcode contents. Online license checks and usage tracking can both be disabled with add-ons in Business and Enterprise plans.

Which browsers are supported?

All major browsers on Android and iOS. The camera requires HTTPS (or localhost) and the decoding requires support for WebAssembly.

Still have questions? Check out the full FAQ.

Start your free 14-day trial today

Integrating STRICH into your web app typically takes less than a day. Or try our free demo app and convince yourself that STRICH meets your needs.

Launch demo app ↗ Start free trial ↗