Research
Recent Trends in Malicious Packages Targeting Discord
The Socket research team breaks down a sampling of malicious packages that download and execute files, among other suspicious behaviors, targeting the popular Discord platform.
react-zxing
Advanced tools
Changelog
[2.0.0] - 2023-08-17
@zxing/library
dependency to 0.20.0
.onResult
and onError
to onDecodeResult
and onDecodeError
respectively.onDecodeError
error type to use the Exception
class from @zxing/library
.onError
to handle errors that occur during initialization.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({
onDecodeResult(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 |
---|---|---|---|
onDecodeResult | function | Called when a decode result is found. The result is an instance of Result . | |
onDecodeError | function | Called when an decode error is found. The error is an instance of Exception | |
onError | function | Called when any other error occurs, e.g. when the camera stream cannot be accessed. | |
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
We found that react-zxing 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.
Research
The Socket research team breaks down a sampling of malicious packages that download and execute files, among other suspicious behaviors, targeting the popular Discord platform.
Security News
Socket CEO Feross Aboukhadijeh joins a16z partners to discuss how modern, sophisticated supply chain attacks require AI-driven defenses and explore the challenges and solutions in leveraging AI for threat detection early in the development life cycle.
Security News
NIST's new AI Risk Management Framework aims to enhance the security and reliability of generative AI systems and address the unique challenges of malicious AI exploits.