Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
react-zxing-track-access
Advanced tools
Readme
Easily scan QR and ean codes in your React application. Exports a handy useZxing
hook that utilizes the popular @zxing/library
to stream video to an element and decode codes from it.
import { useState } from "react";
import { useZxing } from "react-zxing";
export const BarcodeScanner = () => {
const [result, setResult] = useState("");
const { ref } = useZxing({
onResult(result) {
setResult(result.getText());
},
});
return (
<>
<video ref={ref} />
<p>
<span>Last result:</span>
<span>{result}</span>
</p>
</>
);
};
You could either get the device ID from the MediaDevices
API yourself or make use of react-media-devices to list available devices:
import { useMediaDevices } from "react-media-devices";
import { useZxing } from "react-zxing";
const constraints: MediaStreamConstraints = {
video: true,
audio: false,
};
export const BarcodeScanner = () => {
const { devices } = useMediaDevices(constraints);
const deviceId = devices?.[0]?.deviceId;
const { ref } = useZxing({
paused: !deviceId,
deviceId,
});
return <video ref={ref} />;
};
⚠️ Torch support is not available for iOS devices. See this issue.
You can control the torch by accessing the torch
property of the useZxing
return value:
import { useZxing } from "react-zxing";
export const BarcodeScanner = () => {
const {
ref,
torch: { on, off, isOn, isAvailable },
} = useZxing();
return (
<>
<video ref={ref} />
{isAvailable ? (
<button onClick={() => (isOn ? off() : on())}>
{isOn ? "Turn off" : "Turn on"} torch
</button>
) : (
<strong>Unfortunately, torch is not available on this device.</strong>
)}
</>
);
};
Torch support is limited to devices that support the torch
constraint. You can check if torch is available by checking the isAvailable
property.
Name | Type | Default | Description |
---|---|---|---|
onResult | function | Called when a result is found. The result is an instance of Result . | |
onError | function | Called when an error is found. The error is an instance of Error. | |
hints | Map<DecodeHintType, any> | A map of additional parameters to pass to the zxing decoder. | |
timeBetweenDecodingAttempts | number | 300 | The time in milliseconds to wait between decoding attempts. |
constraints | MediaStreamConstraints | { video: { facingMode: 'environment' }, audio: false } | The constraints to use when requesting the camera stream. |
deviceId | string | You may pass an explicit device ID to stream from. | |
paused | boolean | false | Stops the camera stream when true. |
# Install dependencies
yarn
# Build the library
yarn build
# Install example dependencies
yarn --cwd example
# Start the example
yarn --cwd example start
Example should now be running on localhost:1234.
FAQs
Integrate zxing to your React application using a custom hook
The npm package react-zxing-track-access receives a total of 1 weekly downloads. As such, react-zxing-track-access popularity was classified as not popular.
We found that react-zxing-track-access demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.