npmpackage.info

Gathering detailed insights and metrics for react-qrcode

Other packages similar to react-qrcode

qrcode.react

4.2.0

React component to generate QR codes

qrcode-react

0.1.16

React component to generate QRCode with logo

react-native-qrcode-svg

6.3.15

A QR Code generator for React Native based on react-native-svg and javascript-qrcode.

react-qrcode-logo

3.0.0

React component to generate a QR Code customizable with logo and more properties

Gathering detailed insights and metrics for react-qrcode

react-qrcode - 0.3.6 | npmpackage.info

react-qrcode

Make React greater with RxTS.

0.3.6

MIT

TypeScript

658.00 B

268,991 3.2

Installations

npm install react-qrcode

Developer Guide

BETA

Typescript

Yes

Module System

ESM

Node Version

16.17.1

NPM Version

8.15.0 Score

71.4

Supply Chain

90.2

Quality

75.2

Maintenance

100

Vulnerability

99.3

License

Pull Requests

Open

1

Total

188

Closed

96

Merged

91

Issues

Open

3

Total

11

Closed

8

Releases

@react-enhanced/hooks@0.5.0

Updated on Apr 13, 2023

@react-enhanced/translate@0.1.3

Updated on Apr 13, 2023

@react-enhanced/hooks@0.4.2

Updated on Apr 09, 2023

@react-enhanced/eslint-plugin@0.0.3

Updated on Oct 13, 2022

react-qrcode@0.3.6

Updated on Oct 13, 2022

@react-enhanced/utils@0.2.1

Updated on Oct 13, 2022

View All 89 releases

Languages

TypeScript

JavaScript

HTML

TypeScript (98.1%)

JavaScript (1.09%)

HTML (0.8%)

Developer

rx-ts

Download Statistics

Total Downloads

268,991

Last Day

138

Last Week

1,588

Last Month

5,334

Last Year

86,336

GitHub Statistics

MIT License

16 Stars

119 Commits

2 Forks

2 Watchers

2 Branches

2 Contributors

Updated on Apr 09, 2025

Bundle Size

1.28 kB

Minified

658.00 B

Minified + Gzipped

Bundlephobia

Sponsor this package

https://opencollective.com/rxts

Maintainers

View All 2 Contributors

Package Meta Information

Latest Version

0.3.6

Package Id

react-qrcode@0.3.6

Unpacked Size

19.29 kB

Size

5.63 kB

File Count

NPM Version

8.15.0

Node Version

16.17.1

Total Downloads

Cumulative downloads

Total Downloads

268,991

Last Day

100%

138

Compared to previous day

Last Week

5.8%

1,588

Compared to previous week

Last Month

13.2%

5,334

Compared to previous month

Last Year

-16.3%

86,336

Compared to previous year

Weekly Downloads

Monthly Downloads

Yearly Downloads

Peer Dependencies

qrcode react

ReactQRCode

🤳 A React component for QR code generation with qrcode

Demo

Usage

1// Component
2import ReactDOM from 'react-dom'
3import { QRCode } from 'react-qrcode'
4
5ReactDOM.render(<QRCode value="https://www.1stg.me" />)
6
7// hooks
8import { useQRCode } from 'react-qrcode'
9
10export const App = () => {
11  const [value, setValue] = useState('https://www.1stg.me')
12  const dataUrl = useQRCode(value)
13  return (
14    <>
15      <div>dataUrl: {dataUrl}</div>
16      <img src={dataUrl} />
17      <input onChange={e => setValue(e.currentTarget.value)} />
18    </>
19  )
20}

Available Props

prop	type (range)	default value
`version`	`number` (1-40)	N/A
`errorCorrectionLevel`	`String` ('low', 'medium', 'quartile', 'high', 'L', 'M', 'Q', 'H')	`'M'`
`maskPattern`	`number` (0-7)	N/A
`toSJISFunc`	`Function`	N/A
`margin`	`number`	`4`
`scale`	`number`	`4`
`width`	`number`	N/A
`color`	`{ dark: string; light:string }`	`{ dark: '#000000ff', light: '#ffffffff' }`
`type`	`string` ('image/png', 'image/jpeg', 'image/webp')	`'image/png'`
`quality`	`number`(0-1)	`0.92`
`value`	`string \| Array<{ data: string; mode?: string }>`	N/A

Backers

1stG	RxTS	UnTS

Changelog

Detailed changes for each release are documented in CHANGELOG.md.

License

No vulnerabilities found.

10

Dangerous-Workflow

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

10

Binary-Artifacts

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

10

License

Determines if the project has defined a license.

7

SAST

Determines if the project uses static code analysis.

0

Maintained

Determines if the project is "actively maintained".

0

Code-Review

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

0

CII-Best-Practices

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

0

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 0

Details

Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/ci.yml:18: update your workflow using https://app.stepsecurity.io/secureworkflow/rx-ts/react/ci.yml/master?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/ci.yml:21: update your workflow using https://app.stepsecurity.io/secureworkflow/rx-ts/react/ci.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/ci.yml:26: update your workflow using https://app.stepsecurity.io/secureworkflow/rx-ts/react/ci.yml/master?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/ci.yml:41: update your workflow using https://app.stepsecurity.io/secureworkflow/rx-ts/react/ci.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/codeql.yml:27: update your workflow using https://app.stepsecurity.io/secureworkflow/rx-ts/react/codeql.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/codeql.yml:30: update your workflow using https://app.stepsecurity.io/secureworkflow/rx-ts/react/codeql.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/codeql.yml:36: update your workflow using https://app.stepsecurity.io/secureworkflow/rx-ts/react/codeql.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/codeql.yml:39: update your workflow using https://app.stepsecurity.io/secureworkflow/rx-ts/react/codeql.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release.yml:14: update your workflow using https://app.stepsecurity.io/secureworkflow/rx-ts/react/release.yml/master?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/release.yml:20: update your workflow using https://app.stepsecurity.io/secureworkflow/rx-ts/react/release.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release.yml:25: update your workflow using https://app.stepsecurity.io/secureworkflow/rx-ts/react/release.yml/master?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/release.yml:35: update your workflow using https://app.stepsecurity.io/secureworkflow/rx-ts/react/release.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/size-limit.yml:12: update your workflow using https://app.stepsecurity.io/secureworkflow/rx-ts/react/size-limit.yml/master?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/size-limit.yml:15: update your workflow using https://app.stepsecurity.io/secureworkflow/rx-ts/react/size-limit.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/size-limit.yml:20: update your workflow using https://app.stepsecurity.io/secureworkflow/rx-ts/react/size-limit.yml/master?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/size-limit.yml:28: update your workflow using https://app.stepsecurity.io/secureworkflow/rx-ts/react/size-limit.yml/master?enable=pin
Info: 0 out of 10 GitHub-owned GitHubAction dependencies pinned
Info: 0 out of 6 third-party GitHubAction dependencies pinned

0

Token-Permissions

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

0

Fuzzing

Determines if the project uses fuzzing.

0

Security-Policy

Determines if the project has published a security policy.

0

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

Score

3.2

/10

Last Scanned on 2025-06-30

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 react-qrcode

react-qrcode

Installations

Developer Guide

Yes

ESM

16.17.1

8.15.0

Score

Pull Requests

1

188

96

91

Issues

3

11

8

Releases

Languages

Developer

Download Statistics

GitHub Statistics

Bundle Size

1.28 kB

658.00 B

Sponsor this package

Maintainers

Package Meta Information

Total Downloads

268,991

Weekly Downloads

Monthly Downloads

Yearly Downloads

Peer Dependencies

ReactQRCode

Demo

Usage

Available Props

Sponsors

Backers

Changelog

License

10

10

10

7

0

0

0

0

0

0

0

0

3.2

/10

Other packages similar to react-qrcode