Package Health Score

57 / 100

security
No known security issues
popularity
Recognized
maintenance
Inactive
community
Sustainable

Explore Similar Packages

Security

No known security issues

All security vulnerabilities belong to production dependencies of direct and indirect packages.

Security and license risk for significant versions

Version				Vulnerabilities	License Risk
2.5.1	\|	08/2023		0 C 0 H 0 M 0 L	0 H 0 M 0 L
2.4.1	\|	02/2023		0 C 0 H 0 M 0 L	0 H 0 M 0 L
2.0.0	\|	02/2022	Popular	0 C 0 H 0 M 0 L	0 H 0 M 0 L
1.1.0	\|	09/2021		0 C 0 H 0 M 0 L	0 H 0 M 0 L
0.0.0	\|	09/2021		0 C 0 H 0 M 0 L	0 H 0 M 0 L

License

MIT

Security Policy

Is your project affected by vulnerabilities?

Scan your projects for vulnerabilities. Fix quickly with automated fixes. Get started with Snyk for free.

Get started free

Popularity

Recognized

Weekly Downloads (70,242)

GitHub Stars: 162
Forks: 18
Contributors: -

Direct Usage Popularity

The npm package next-qrcode receives a total of 70,242 downloads a week. As such, we scored next-qrcode popularity level to be Recognized.

Based on project statistics from the GitHub repository for the npm package next-qrcode, we found that it has been starred 162 times.

Downloads are calculated as moving averages for a period of the last 12 months, excluding weekends and known missing data points.

Community

Sustainable

Readme.md: Yes
Contributing.md: No
Code of Conduct: Yes
Contributors: 0
Funding: No

This project has seen only 10 or less contributors.

Embed Package Health Score Badge

Maintenance

Inactive

Commit Frequency

No Recent Commits

Open Issues: 12
Open PR: 4
Last Release: 1 year ago
Last Commit: 1 year ago

Further analysis of the maintenance status of next-qrcode based on released npm versions cadence, the repository activity, and other data points determined that its maintenance is Inactive.

An important project maintenance signal to consider for next-qrcode is that it hasn't seen any new versions released to npm in the past 12 months, and could be considered as a discontinued project, or that which receives low attention from its maintainers.

As a healthy sign for on-going project maintenance, we found that the GitHub repository had at least 1 pull request or issue interacted with by the community.

Keep your project healthy

Check your package.json

Ensure all the packages you're using are healthy and well-maintained

Snyk Vulnerability Scanner

Get health score & security insights directly in your IDE

Package

Node.js Compatibility: >=8

Age: 3 years
Dependencies: 1 Direct
Versions: 12
Install Size: 21.5 kB
Dist-tags: 1
# of Files: 7
Maintainers: 1
TS Typings: No

next-qrcode has more than a single and default latest tag published for the npm package. This means, there may be other tags available for this package, such as next to indicate future releases, or stable to indicate stable releases.

Readme

next-qrcode

React hooks for generating QR code for your next React apps.

npm bundle size

🎁 Features

Render Canvas, SVG and Image
Support Numeric, Alphanumeric, Kanji and Byte mode
Support Japanese, Chinese, Greek and Cyrillic characters
Support multibyte characters (like emojis smile)

Live Demo

🔧 Install

next-qrcode is available on npm. It can be installed with the following command:

npm install next-qrcode --save

next-qrcode is available on yarn as well. It can be installed with the following command:

yarn add next-qrcode --save

💡 Canvas

Usage

import React from 'react';
import { useQRCode } from 'next-qrcode';

function App() {
  const { Canvas } = useQRCode();

  return (
    <canvas>
  );
}

export default App;

Canvas props

Prop	Type	Require	Description
text	string	✔️	Text/URL to encode.
options	options	❌	QR code options.
logo	logo	❌	QR code logo.

options

Prop	Type	Default	Require	Description
errorCorrectionLevel	string	`M`	❌	Correction level. Possible values are `low`, `medium`, `quartile`, `high` or `L`, `M`, `Q`, `H`.
margin	number	`4`	❌	Define how much wide the quiet zone should be.
scale	number	`4`	❌	Scale factor. A value of `1` means 1px per modules (black dots).
width	number	`4`	❌	Forces a specific width for the output image. If width is too small to contain the qr symbol, this option will be ignored. Takes precedence over `scale`.
color.dark	string	`#000000ff`	❌	Color of dark module. Value must be in hex format (RGBA). Note: dark color should always be darker than `color.light`.
color.light	string	`#ffffffff`	❌	Color of light module. Value must be in hex format (RGBA).

logo

Prop	Type	Require	Description
src	string	✔️	The path to the image.
options	options	❌	Logo options.

options

Prop	Type	Require	Description
width	number	❌	Logo dimension.
x	number	❌	If none or undefined, will center.
y	number	❌	If none or undefined, will center.

💡 SVG

Usage

import React from 'react';
import { useQRCode } from 'next-qrcode';

function App() {
  const { SVG } = useQRCode();

  return (
    <svg></svg>
  );
}

export default App;

SVG props

Prop	Type	Require	Description
text	string	✔️	Text/URL to encode.
options	options	❌	QR code options.

options

Prop	Type	Default	Require	Description
margin	number	`4`	❌	Define how much wide the quiet zone should be.
width	number	`4`	❌	Forces a specific width for the output image. If width is too small to contain the qr symbol, this option will be ignored. Takes precedence over `scale`.
color.dark	string	`#000000ff`	❌	Color of dark module. Value must be in hex format (RGBA). Note: dark color should always be darker than `color.light`.
color.light	string	`#ffffffff`	❌	Color of light module. Value must be in hex format (RGBA).

💡 Image

Usage

import React from 'react';
import { useQRCode } from 'next-qrcode';

function App() {
  const { Image } = useQRCode();

  return (
    <img>
  );
}

export default App;

Image props

Prop	Type	Require	Description
text	string	✔️	Text/URL to encode.
options	object	❌	QR code options

options

Prop	Type	Default	Require	Description
type	string (`image/png`, `image/jpeg`, `image/webp`)	`image/png`	❌	Image format.
quality	number	`0.92`	❌	A Number between `0` and `1` indicating image quality if the type is `image/jpeg` or `image/webp`.
errorCorrectionLevel	string	`M`	❌	Correction level. Possible values are `low`, `medium`, `quartile`, `high` or `L`, `M`, `Q`, `H`.
margin	number	`4`	❌	Define how much wide the quiet zone should be.
scale	number	`4`	❌	Scale factor. A value of `1` means 1px per modules (black dots).
width	number	`4`	❌	Forces a specific width for the output image. If width is too small to contain the qr symbol, this option will be ignored. Takes precedence over `scale`.
color.dark	string	`#000000ff`	❌	Color of dark module. Value must be in hex format (RGBA). Note: dark color should always be darker than `color.light`.
color.light	string	`#ffffffff`	❌	Color of light module. Value must be in hex format (RGBA).

📜 Changelog

Latest version 2.5.1 (2023-08-01):

Upgrade QRCode options API

Details changes for each release are documented in the CHANGELOG.md.

❗ Issues

If you think any of the next-qrcode can be improved, please do open a PR with any updates and submit any issues. Also, I will continue to improve this, so you might want to watch/star this repository to revisit.

🌟 Contribution

We'd love to have your helping hand on contributions to next-qrcode by forking and sending a pull request!

Your contributions are heartily ♡ welcome, recognized and appreciated. (✿◠‿◠)

How to contribute:

Open pull request with improvements
Discuss ideas in issues
Spread the word
Reach out with any feedback

🏆 Contributors

_Bunlong

_{Michael Desa}

_{Jared Scheib}

_{Mehrdad MotaghiFar}

👨‍👩‍👦 Advertisement

You maybe interested.

React Patterns – React patterns & techniques to use in development for React Developer.
React Papaparse – The fastest in-browser CSV (or delimited text) parser for React.
Next Share – Social media share buttons for your next React apps.
Next Time Ago – A lightweight tiny time-ago component for your next React apps.

⚖️ License

The MIT License

next-qrcode dependencies

qrcode

FAQs

What is next-qrcode?

React hooks for generating QR code for your next React apps. Visit Snyk Advisor to see a full health score report for next-qrcode, including popularity, security, maintenance & community analysis.

Is next-qrcode popular?

The npm package next-qrcode receives a total of 70,242 weekly downloads. As such, next-qrcode popularity was classified as a recognized. Visit the popularity section on Snyk Advisor to see the full health analysis.

Is next-qrcode well maintained?

We found indications that next-qrcode is an Inactive project. See the full package health analysis to learn more about the package maintenance status.

Is next-qrcode safe to use?

The npm package next-qrcode was scanned for known vulnerabilities and missing license, and no issues were found. Thus the package was deemed as safe to use. See the full health analysis review.

Last updated on 17 November-2024, at 18:38 (UTC).

Build a secure application checklist

Select a recommended open source package

Minimize your risk by selecting secure & well maintained open source packages

DONE

Scan your app for vulnerabilities

Scan your application to find vulnerabilities in your: source code, open source dependencies, containers and configuration files

SCAN NOW

Fix identified vulnerabilities

Easily fix your code by leveraging automatically generated PRs

AUTO FIX

Monitor for new issues

New vulnerabilities are discovered every day. Get notified if your application is affected

MONITOR APP

Package Health Score

Explore Similar Packages

Security and license risk for significant versions

Is your project affected by vulnerabilities?

Weekly Downloads (70,242)

Direct Usage Popularity

Embed Package Health Score Badge

Commit Frequency

Keep your project healthy

Check your package.json

Snyk Vulnerability Scanner

Readme

next-qrcode

🎁 Features

🔧 Install

💡 Canvas

Usage

Canvas props

options

logo

options

💡 SVG

Usage

SVG props

options

💡 Image

Usage

Image props

options

📜 Changelog

❗ Issues

🌟 Contribution

🏆 Contributors

👨‍👩‍👦 Advertisement

⚖️ License

next-qrcode dependencies

next-qrcode development dependencies

FAQs

What is next-qrcode?

Is next-qrcode popular?

Is next-qrcode well maintained?

Is next-qrcode safe to use?

Build a secure application checklist

Select a recommended open source package

Scan your app for vulnerabilities

Source Code

Open Source

Container

Config

Fix identified vulnerabilities

Monitor for new issues