Installations
npm install qrcode.reactDeveloper
Developer Guide
Module System
CommonJS, ESM
Min. Node Version
Typescript Support
Yes
Node Version
22.10.0
NPM Version
10.9.0
Statistics
3,897 Stars
266 Commits
335 Forks
26 Watching
7 Branches
25 Contributors
Updated on 29 Nov 2024
Languages
TypeScript (91.22%)
JavaScript (6.14%)
Makefile (2.64%)
Total Downloads
Cumulative downloads
Total Downloads
171,030,889
Last day
-24.7%
205,825
Compared to previous day
Last week
-3.7%
1,310,226
Compared to previous week
Last month
4%
5,602,017
Compared to previous month
Last year
42.2%
67,104,423
Compared to previous year
Daily Downloads
Weekly Downloads
Monthly Downloads
Yearly Downloads
Peer Dependencies
1
Dev Dependencies
24
qrcode.react
A React component to generate QR codes for rendering to the DOM.
Installation
1npm install qrcode.react
Usage
qrcode.react exports two components, supporting rendering as SVG or Canvas. SVG is generally recommended as it is more flexible, but Canvas may be preferable.
All examples are shown using modern JavaScript modules and syntax. CommonJS require('qrcode.react') is also supported.
QRCodeSVG
1import ReactDOM from 'react-dom'; 2import {QRCodeSVG} from 'qrcode.react'; 3 4ReactDOM.render( 5 <QRCodeSVG value="https://reactjs.org/" />, 6 document.getElementById('mountNode') 7);
QRCodeCanvas
1import ReactDOM from 'react-dom'; 2import {QRCodeCanvas} from 'qrcode.react'; 3 4ReactDOM.render( 5 <QRCodeCanvas value="https://reactjs.org/" />, 6 document.getElementById('mountNode') 7);
Available Props
Below is a condensed type definition of the props QRCodeSVG and QRCodeCanvas accept.
1type QRProps = { 2 /** 3 * The value to encode into the QR Code. An array of strings can be passed in 4 * to represent multiple segments to further optimize the QR Code. 5 */ 6 value: string | string[]; 7 /** 8 * The size, in pixels, to render the QR Code. 9 * @defaultValue 128 10 */ 11 size?: number; 12 /** 13 * The Error Correction Level to use. 14 * @see https://www.qrcode.com/en/about/error_correction.html 15 * @defaultValue L 16 */ 17 level?: 'L' | 'M' | 'Q' | 'H'; 18 /** 19 * The background color used to render the QR Code. 20 * @see https://developer.mozilla.org/en-US/docs/Web/CSS/color_value 21 * @defaultValue #FFFFFF 22 */ 23 bgColor?: string; 24 /** 25 * The foregtound color used to render the QR Code. 26 * @see https://developer.mozilla.org/en-US/docs/Web/CSS/color_value 27 * @defaultValue #000000 28 */ 29 fgColor?: string; 30 /** 31 * Whether or not a margin of 4 modules should be rendered as a part of the 32 * QR Code. 33 * @deprecated Use `marginSize` instead. 34 * @defaultValue false 35 */ 36 includeMargin?: boolean; 37 /** 38 * The number of _modules_ to use for margin. The QR Code specification 39 * requires `4`, however you can specify any number. Values will be turned to 40 * integers with `Math.floor`. Overrides `includeMargin` when both are specified. 41 * @defaultValue 0 42 */ 43 marginSize?: number; 44 /** 45 * The title to assign to the QR Code. Used for accessibility reasons. 46 */ 47 title?: string; 48 /** 49 * The minimum version used when encoding the QR Code. Valid values are 1-40 50 * with higher values resulting in more complex QR Codes. The optimal 51 * (lowest) version is determined for the `value` provided, using `minVersion` 52 * as the lower bound. 53 * @defaultValue 1 54 */ 55 minVersion?: number; 56 /** 57 * If enabled, the Error Correction Level of the result may be higher than 58 * the specified Error Correction Level option if it can be done without 59 * increasing the version. 60 * @defaultValue true 61 */ 62 boostLevel?: boolean; 63 /** 64 * The settings for the embedded image. 65 */ 66 imageSettings?: { 67 /** 68 * The URI of the embedded image. 69 */ 70 src: string; 71 /** 72 * The height, in pixels, of the image. 73 */ 74 height: number; 75 /** 76 * The width, in pixels, of the image. 77 */ 78 width: number; 79 /** 80 * Whether or not to "excavate" the modules around the embedded image. This 81 * means that any modules the embedded image overlaps will use the background 82 * color. 83 */ 84 excavate: boolean; 85 /** 86 * The horiztonal offset of the embedded image, starting from the top left corner. 87 * Will center if not specified. 88 */ 89 x?: number; 90 /** 91 * The vertical offset of the embedded image, starting from the top left corner. 92 * Will center if not specified. 93 */ 94 y?: number; 95 /** 96 * The opacity of the embedded image in the range of 0-1. 97 * @defaultValue 1 98 */ 99 opacity?: number; 100 /** 101 * The cross-origin value to use when loading the image. This is used to 102 * ensure compatibility with CORS, particularly when extracting image data 103 * from QRCodeCanvas. 104 * Note: `undefined` is treated differently than the seemingly equivalent 105 * empty string. This is intended to align with HTML behavior where omitting 106 * the attribute behaves differently than the empty string. 107 */ 108 crossOrigin?: 'anonymous' | 'use-credentials' | '' | undefined; 109 }; 110};
value
The value to encode into the QR Code. See Encoding Mode for additional details.
| Type | Default Value |
|---|---|
string | string[] | — |
size
The size, in pixels, to render the QR Code.
| Type | Default Value |
|---|---|
number | 128 |
level
The Error Correction Level to use. Information is encoded in QR Codes such that they can lose part of their visible areas and still be decodable. The amount of correction depends on this value. Higher error correction will result in more complex QR Codes.
L= low (~7%)M= medium (~15%)Q= quartile (~25%)H= high (~30%)
See Wikipedia or the official QR Code documentation for a more detailed explaination.
| Type | Default Value |
|---|---|
L | M | Q | H | L |
bgColor
The background color used to render the QR Code. This is passed directly to the Canvas (ctx.fillStyle = bgColor) or the SVG <path> (fill={bgColor}), both which accept any CSS color.
| Type | Default Value |
|---|---|
string | #FFFFFF |
fgColor
The foreground color used to render the QR Code. It follows the same constraints as bgColor
| Type | Default Value |
|---|---|
string | #000000 |
includeMargin
[!WARNING] This has been deprecated in v4 and will be removed in a future version. Use
marginSizeinstead.
Whether or not a margin of 4 modules should be rendered as a part of the QR Code.
| Type | Default Value |
|---|---|
boolean | false |
marginSize
The number of modules to use for margin. The QR Code specification requires 4, however you can specify any number. Values will be turned to integers with Math.floor. Overrides includeMargin when both are specified.
| Type | Default Value |
|---|---|
number | 0 |
title
The title to assign to the QR Code. Used for accessibility reasons.
| Type | Default Value |
|---|---|
string | — |
minVersion
The minimum version used when encoding the QR Code. Valid values are 1-40 with higher values resulting in more complex QR Codes. The optimal (lowest) version is determined for the value provided, using minVersion as the lower bound.
| Type | Default Value |
|---|---|
number | 1 |
boostLevel
If enabled, the Error Correction Level of the result may be higher than the specified Error Correction Level option if it can be done without increasing the version.
| Type | Default Value |
|---|---|
boolean | true |
imageSettings
Used to specify the details for an embedded image, often used to embed a logo.
| Type | Default Value |
|---|---|
object (see fields below) | — |
imageSettings.src
The URI of the embedded image. This will get passed directly to src of an img element for QRCodeCanvas or the href of an inline image for QRCodeSVG.
| Type | Default Value |
|---|---|
string | — |
imageSettings.height
The height, in pixels, of the embedded image.
| Type | Default Value |
|---|---|
number | — |
imageSettings.width
The width, in pixels, of the embedded image.
| Type | Default Value |
|---|---|
number | — |
imageSettings.excavate
Whether or not to "excavate" the modules around the embedded image. This means that any modules the embedded image overlaps will use the background color. Use this to ensure clean edges around your image. It is also useful when embedding images with transparency.
| Type | Default Value |
|---|---|
boolean | — |
imageSettings.x
The horizontal offset, in pixels, of the embedded image. Positioning follows standard DOM positioning, with top left corner being 0.
When not specified, will center the image.
| Type | Default Value |
|---|---|
number | — |
imageSettings.y
The vertical offset, in pixels, of the embedded image. Positioning follows standard DOM positioning, with top left corner being 0.
When not specified, will center the image.
| Type | Default Value |
|---|---|
number | — |
imageSettings.opacity
The opacity of the embedded image, in the range of 0 to 1.
| Type | Default Value |
|---|---|
number | 1 |
imageSettings.crossOrigin
The cross-origin value to use when loading the embedded image. Note that undefined works as typically does with React, excluding the attribute from the DOM node. This is intended to align with HTML behavior where omitting the attribute behaves differently than the empty string.
| Type | Default Value |
|---|---|
string | — |
Custom Styles
qrcode.react will pass through any additional props to the underlying DOM node (<svg> or <canvas>). This allows the use of inline style or custom className to customize the rendering. One common use would be to support a responsive layout.
[!NOTE] In order to render QR Codes in
<canvas>on high density displays, we scale the canvas element to contain an appropriate number of pixels and then use inline styles to scale back down. We will merge any additional styles, with customheightandwidthoverriding our own values. This allows scaling to percentages but if scaling beyond thesize, you will encounter blurry images. I recommend detecting resizes with something like react-measure to detect and pass the appropriate size when rendering to<canvas>.
Encoding Mode
qrcode.react supports encoding text only. Prior to v4.1.0, this was done in a single segment. Since then, the value prop can be an array of strings. Each member will be encoded separately. The encoding library being used does minimal detection to determine if each segment being encoded can follow an optimized path for Numeric or Alphanumeric modes, allowing for more data to be encoded. Otherwise, it will encode following Byte mode. This mode includes supports multi-byte Unicode characters such as Kanji, however it does not support the optimized Kanji encoding mode.
LICENSE
qrcode.react is licensed under the ISC license.
qrcode.react bundles QR Code Generator, which is available under the MIT license.
No vulnerabilities found.
Reason
no binaries found in the repo
Reason
3 different organizations found -- score normalized to 10
Details
- Info: contributors work for facebook,reactjs,relayjs
Reason
no dangerous workflow patterns detected
Reason
update tool detected
Details
- Info: tool 'Dependabot' is used: .github/dependabot.yml:1
Reason
16 commit(s) out of 30 and 13 issue activity out of 30 found in the last 90 days -- score normalized to 10
Reason
19 out of 20 merged PRs checked by a CI test -- score normalized to 9
Reason
license file detected
Details
- Info: License file found in expected location: LICENSE:1
- Warn: Any licence detected not an FSF or OSI recognized license: LICENSE:1
Reason
SAST tool detected but not run on all commits
Details
- Warn: 19 commits out of 20 are checked with a SAST tool
- Info: SAST tool detected: CodeQL
Reason
branch protection is not maximal on development and all release branches
Details
- Info: 'force pushes' disabled on branch 'trunk'
- Info: 'allow deletion' disabled on branch 'trunk'
- Warn: no status checks found to merge onto branch 'trunk'
- Warn: number of required reviewers is 0 on branch 'trunk'
- Info: settings apply to administrators on branch 'trunk'
Reason
badge detected: in_progress
Reason
found 19 unreviewed changesets out of 26 -- score normalized to 2
Reason
dependency not pinned by hash detected -- score normalized to 1
Details
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/ci.yml:10: update your workflow using https://app.stepsecurity.io/secureworkflow/zpao/qrcode.react/ci.yml/trunk?enable=pin
- Warn: third-party GitHubAction not pinned by hash: .github/workflows/ci.yml:11: update your workflow using https://app.stepsecurity.io/secureworkflow/zpao/qrcode.react/ci.yml/trunk?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/ci.yml:12: update your workflow using https://app.stepsecurity.io/secureworkflow/zpao/qrcode.react/ci.yml/trunk?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/ci.yml:18: update your workflow using https://app.stepsecurity.io/secureworkflow/zpao/qrcode.react/ci.yml/trunk?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/ci.yml:35: update your workflow using https://app.stepsecurity.io/secureworkflow/zpao/qrcode.react/ci.yml/trunk?enable=pin
- Warn: third-party GitHubAction not pinned by hash: .github/workflows/ci.yml:36: update your workflow using https://app.stepsecurity.io/secureworkflow/zpao/qrcode.react/ci.yml/trunk?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/ci.yml:37: update your workflow using https://app.stepsecurity.io/secureworkflow/zpao/qrcode.react/ci.yml/trunk?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/ci.yml:50: update your workflow using https://app.stepsecurity.io/secureworkflow/zpao/qrcode.react/ci.yml/trunk?enable=pin
- Warn: third-party GitHubAction not pinned by hash: .github/workflows/ci.yml:51: update your workflow using https://app.stepsecurity.io/secureworkflow/zpao/qrcode.react/ci.yml/trunk?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/ci.yml:52: update your workflow using https://app.stepsecurity.io/secureworkflow/zpao/qrcode.react/ci.yml/trunk?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/ci.yml:62: update your workflow using https://app.stepsecurity.io/secureworkflow/zpao/qrcode.react/ci.yml/trunk?enable=pin
- Warn: third-party GitHubAction not pinned by hash: .github/workflows/ci.yml:63: update your workflow using https://app.stepsecurity.io/secureworkflow/zpao/qrcode.react/ci.yml/trunk?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/ci.yml:64: update your workflow using https://app.stepsecurity.io/secureworkflow/zpao/qrcode.react/ci.yml/trunk?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/ci.yml:69: update your workflow using https://app.stepsecurity.io/secureworkflow/zpao/qrcode.react/ci.yml/trunk?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/codeql-analysis.yml:25: update your workflow using https://app.stepsecurity.io/secureworkflow/zpao/qrcode.react/codeql-analysis.yml/trunk?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/codeql-analysis.yml:29: update your workflow using https://app.stepsecurity.io/secureworkflow/zpao/qrcode.react/codeql-analysis.yml/trunk?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/codeql-analysis.yml:35: update your workflow using https://app.stepsecurity.io/secureworkflow/zpao/qrcode.react/codeql-analysis.yml/trunk?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/codeql-analysis.yml:38: update your workflow using https://app.stepsecurity.io/secureworkflow/zpao/qrcode.react/codeql-analysis.yml/trunk?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/scorecard.yml:35: update your workflow using https://app.stepsecurity.io/secureworkflow/zpao/qrcode.react/scorecard.yml/trunk?enable=pin
- Info: 2 out of 17 GitHub-owned GitHubAction dependencies pinned
- Info: 1 out of 5 third-party GitHubAction dependencies pinned
Reason
project is not fuzzed
Details
- Warn: no OSSFuzz integration found: Follow the steps in https://github.com/google/oss-fuzz to integrate fuzzing for your project. Over time, try to add fuzzing for more functionalities of your project. (High effort)
- Warn: no OneFuzz integration found: Follow the steps in https://github.com/microsoft/onefuzz to start fuzzing for your project. Over time, try to add fuzzing for more functionalities of your project. (High effort)
- Warn: no GoBuiltInFuzzer integration found: Follow the steps in https://go.dev/doc/fuzz/ to enable fuzzing on your project. Over time, try to add fuzzing for more functionalities of your project. (Medium effort)
- Warn: no PythonAtherisFuzzer integration found: Follow the steps in https://github.com/google/atheris to enable fuzzing on your project. Over time, try to add fuzzing for more functionalities of your project. (Medium effort)
- Warn: no CLibFuzzer integration found: Follow the steps in https://llvm.org/docs/LibFuzzer.html to enable fuzzing on your project. Over time, try to add fuzzing for more functionalities of your project. (Medium effort)
- Warn: no CppLibFuzzer integration found: Follow the steps in https://llvm.org/docs/LibFuzzer.html to enable fuzzing on your project. Over time, try to add fuzzing for more functionalities of your project. (Medium effort)
- Warn: no SwiftLibFuzzer integration found: Follow the steps in https://google.github.io/oss-fuzz/getting-started/new-project-guide/swift-lang/ to enable fuzzing on your project. Over time, try to add fuzzing for more functionalities of your project. (Medium effort)
- Warn: no RustCargoFuzzer integration found: Follow the steps in https://rust-fuzz.github.io/book/cargo-fuzz.html to enable fuzzing on your project. Over time, try to add fuzzing for more functionalities of your project. (Medium effort)
- Warn: no JavaJazzerFuzzer integration found: Follow the steps in https://github.com/CodeIntelligenceTesting/jazzer to enable fuzzing on your project. Over time, try to add fuzzing for more functionalities of your project. (Medium effort)
- Warn: no ClusterFuzzLite integration found: Follow the steps in https://github.com/google/clusterfuzzlite to integrate fuzzing as part of CI. Over time, try to add fuzzing for more functionalities of your project. (High effort)
- Warn: no HaskellPropertyBasedTesting integration found: Use one of the following frameworks to fuzz your project: QuickCheck: https://hackage.haskell.org/package/QuickCheck hedgehog: https://hedgehog.qa/ validity: https://github.com/NorfairKing/validity smallcheck: https://hackage.haskell.org/package/smallcheck hspec: https://hspec.github.io/ tasty: https://hackage.haskell.org/package/tasty (High effort)
- Warn: no TypeScriptPropertyBasedTesting integration found: Use fast-check: https://github.com/dubzzz/fast-check (High effort)
- Warn: no JavaScriptPropertyBasedTesting integration found: Use fast-check: https://github.com/dubzzz/fast-check (High effort)
Reason
security policy file not detected
Details
- Warn: no security policy file detected: On GitHub: Enable private vulnerability disclosure in your repository settings https://docs.github.com/en/code-security/security-advisories/repository-security-advisories/configuring-private-vulnerability-reporting-for-a-repository Add a section in your SECURITY.md indicating you have enabled private reporting, and tell them to follow the steps in https://docs.github.com/en/code-security/security-advisories/guidance-on-reporting-and-writing/privately-reporting-a-security-vulnerability to report vulnerabilities. On GitLab: Add a section in your SECURITY.md indicating the process to disclose vulnerabilities for your project. Examples: https://github.com/ossf/scorecard/blob/main/SECURITY.md, https://github.com/slsa-framework/slsa-github-generator/blob/main/SECURITY.md, https://github.com/sigstore/.github/blob/main/SECURITY.md. For additional information on vulnerability disclosure, see https://github.com/ossf/oss-vulnerability-guide/blob/main/maintainer-guide.md. (Medium effort)
- Warn: no security file to analyze: On GitHub: Enable private vulnerability disclosure in your repository settings https://docs.github.com/en/code-security/security-advisories/repository-security-advisories/configuring-private-vulnerability-reporting-for-a-repository Add a section in your SECURITY.md indicating you have enabled private reporting, and tell them to follow the steps in https://docs.github.com/en/code-security/security-advisories/guidance-on-reporting-and-writing/privately-reporting-a-security-vulnerability to report vulnerabilities. On GitLab: Provide a point of contact in your SECURITY.md. Examples: https://github.com/ossf/scorecard/blob/main/SECURITY.md, https://github.com/slsa-framework/slsa-github-generator/blob/main/SECURITY.md, https://github.com/sigstore/.github/blob/main/SECURITY.md. (Low effort)
- Warn: no security file to analyze: On GitHub: Enable private vulnerability disclosure in your repository settings https://docs.github.com/en/code-security/security-advisories/repository-security-advisories/configuring-private-vulnerability-reporting-for-a-repository Add a section in your SECURITY.md indicating you have enabled private reporting, and tell them to follow the steps in https://docs.github.com/en/code-security/security-advisories/guidance-on-reporting-and-writing/privately-reporting-a-security-vulnerability to report vulnerabilities. On GitLab: Add a section in your SECURITY.md indicating the process to disclose vulnerabilities for your project. Examples: https://github.com/ossf/scorecard/blob/main/SECURITY.md, https://github.com/slsa-framework/slsa-github-generator/blob/main/SECURITY.md, https://github.com/sigstore/.github/blob/main/SECURITY.md. (Low effort)
- Warn: no security file to analyze: On GitHub: Enable private vulnerability disclosure in your repository settings https://docs.github.com/en/code-security/security-advisories/repository-security-advisories/configuring-private-vulnerability-reporting-for-a-repository Add a section in your SECURITY.md indicating you have enabled private reporting, and tell them to follow the steps in https://docs.github.com/en/code-security/security-advisories/guidance-on-reporting-and-writing/privately-reporting-a-security-vulnerability to report vulnerabilities. On GitLab: Add a section in your SECURITY.md indicating the process to disclose vulnerabilities for your project. Examples: https://github.com/ossf/scorecard/blob/main/SECURITY.md, https://github.com/slsa-framework/slsa-github-generator/blob/main/SECURITY.md, https://github.com/sigstore/.github/blob/main/SECURITY.md. (Low effort)
Reason
detected GitHub workflow tokens with excessive permissions
Details
- Warn: no topLevel permission defined: .github/workflows/ci.yml:1: Visit https://app.stepsecurity.io/secureworkflow/zpao/qrcode.react/ci.yml/trunk?enable=permissions Tick the 'Restrict permissions for GITHUB_TOKEN' Untick other options NOTE: If you want to resolve multiple issues at once, you can visit https://app.stepsecurity.io/securerepo instead. (Low effort)
- Warn: no topLevel permission defined: .github/workflows/codeql-analysis.yml:1: Visit https://app.stepsecurity.io/secureworkflow/zpao/qrcode.react/codeql-analysis.yml/trunk?enable=permissions Tick the 'Restrict permissions for GITHUB_TOKEN' Untick other options NOTE: If you want to resolve multiple issues at once, you can visit https://app.stepsecurity.io/securerepo instead. (Low effort)
- Info: jobLevel 'actions' permission set to 'read': .github/workflows/codeql-analysis.yml:14
- Info: jobLevel 'contents' permission set to 'read': .github/workflows/codeql-analysis.yml:15
- Info: topLevel permissions set to 'read-all': .github/workflows/scorecard.yml:18
- Info: no jobLevel write permissions found
Score
5.7
/10
Last Scanned on 2024-11-22T17:40:07Z
The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.
Learn More