npmpackage.info

Gathering detailed insights and metrics for qrcode.react

Other packages similar to qrcode.react

@types/qrcode.react

1.0.5

TypeScript definitions for qrcode.react

solid-qr-code

0.1.11

Solid component to generate QR codes, based on qrcode.react

@rc-component/qrcode

1.0.0

base abstract trigger component for react

qrcode.react-ie

3.1.3

React component to generate QR codes, support ie11

Gathering detailed insights and metrics for qrcode.react

qrcode.react

A <QRCode/> component for use with React.

4.1.0

3,897

NOASSERTION

TypeScript

171,030,889 5.7

Installations

npm install qrcode.react

Pull Requests

Open

8

Total

207

Closed

112

Merged

87

Issues

Open

20

Total

157

Closed

137

Releases

v4.1.0

Published on 22 Oct 2024

v3.2.0

Published on 01 Sept 2024

v4.0.1

Published on 29 Aug 2024

v4.0.0

Published on 28 Aug 2024

v3.1.0

Published on 25 Jun 2022

v3.0.2

Published on 15 May 2022

View all 24 releases

Developer

zpao

Developer Guide

BETA

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

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

Versions

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 marginSize instead.

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 custom height and width overriding our own values. This allows scaling to percentages but if scaling beyond the size, 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.

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

10

Contributors

Determines if the project has a set of contributors from multiple organizations (e.g., companies).

10

Dangerous-Workflow

Determines if the project's GitHub Action workflows avoid dangerous patterns.

10

Dependency-Update-Tool

Determines if the project uses a dependency update tool.

10

Maintained

Determines if the project is "actively maintained".

9

CI-Tests

Determines if the project runs tests before pull requests are merged.

9

License

Determines if the project has defined a license.

9

SAST

Determines if the project uses static code analysis.

3

Branch-Protection

Determines if the default and release branches are protected with GitHub's branch protection settings.

2

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

2

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

1

Pinned-Dependencies

Determines if the project has declared and pinned the dependencies of its build process.

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

0

Fuzzing

Determines if the project uses fuzzing.

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)

0

Security-Policy

Determines if the project has published a security policy.

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)

0

Token-Permissions

Determines if the project's workflows follow the principle of least privilege.

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

Other packages similar to qrcode.react

Other packages similar to qrcode.react

qrcode.react

Installations

Pull Requests

8

207

112

87

Issues

20

157

137

Releases

Developer

Developer Guide

CommonJS, ESM

Yes

22.10.0

10.9.0

Statistics

Languages

Total Downloads

171,030,889

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Peer Dependencies

Dev Dependencies

qrcode.react

Installation

Usage

QRCodeSVG

QRCodeCanvas

Available Props

value

size

level

bgColor

fgColor

includeMargin

marginSize

title

minVersion

boostLevel

imageSettings

imageSettings.src

imageSettings.height

imageSettings.width

imageSettings.excavate

imageSettings.x

imageSettings.y

imageSettings.opacity

imageSettings.crossOrigin

Custom Styles

Encoding Mode

LICENSE

10

10

10

10

10

9

9

9

3

2

2

1

0

0

0

5.7

/10

`QRCodeSVG`

`QRCodeCanvas`

`value`

`size`

`level`

`bgColor`

`fgColor`

`includeMargin`

`marginSize`

`title`

`minVersion`

`boostLevel`

`imageSettings`

`imageSettings.src`

`imageSettings.height`

`imageSettings.width`

`imageSettings.excavate`

`imageSettings.x`

`imageSettings.y`

`imageSettings.opacity`

`imageSettings.crossOrigin`