Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/Bunlong/next-qrcode

React hooks for generating QRCode for your next React apps.
https://github.com/Bunlong/next-qrcode

chinese chinese-fonts hooks japanese japanese-font japanese-fonts javascript next-qrcode nextjs nextjs-plugin qrcode qrcode-generator react react-components react-hooks react-qrcode typescript

Last synced: 3 months ago
JSON representation

React hooks for generating QRCode for your next React apps.

Host: GitHub
URL: https://github.com/Bunlong/next-qrcode
Owner: Bunlong
License: mit
Created: 2020-05-09T02:30:07.000Z (over 4 years ago)
Default Branch: master
Last Pushed: 2023-10-25T06:13:56.000Z (about 1 year ago)
Last Synced: 2024-10-25T00:37:38.365Z (3 months ago)
Topics: chinese, chinese-fonts, hooks, japanese, japanese-font, japanese-fonts, javascript, next-qrcode, nextjs, nextjs-plugin, qrcode, qrcode-generator, react, react-components, react-hooks, react-qrcode, typescript
Language: TypeScript
Homepage: https://next-qrcode.js.org
Size: 1.94 MB
Stars: 160
Watchers: 3
Forks: 18
Open Issues: 15
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
- Support: supports/create-next-app/.eslintrc.json

Awesome Lists containing this project

awesome - Bunlong/next-qrcode - React hooks for generating QRCode for your next React apps. (TypeScript)

README

        # next-qrcode

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

[![downloads](https://img.shields.io/npm/dm/next-qrcode.svg?label=monthly%20downloads)](https://www.npmjs.com/package/next-qrcode) [![downloads](https://img.shields.io/npm/dt/next-qrcode.svg?label=total%20downloads)](https://www.npmjs.com/package/next-qrcode)

[![NPM](https://img.shields.io/npm/v/next-qrcode.svg)](https://www.npmjs.com/package/next-qrcode) ![npm bundle size](https://img.shields.io/bundlephobia/min/next-qrcode) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

## 🎁 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](https://next-qrcode.js.org/demo)

## 🔧 Install

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

```js

npm install next-qrcode --save

```

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

```js

yarn add next-qrcode --save

```

## 💡 Canvas

### Usage

```js

import React from 'react';

import { useQRCode } from 'next-qrcode';

function App() {

  const { Canvas } = useQRCode();

  return (

    

  );

}

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

      Default

      Require

      Description

    

  

  

    

      width

      number

      

      ❌

      Logo dimension.

    

    

      x

      number

      

      ❌

      If none or undefined, will center.

    

    

      y

      number

      

      ❌

      If none or undefined, will center.

    

  

## 💡 SVG

### Usage

```js

import React from 'react';

import { useQRCode } from 'next-qrcode';

function App() {

  const { SVG } = useQRCode();

  return (

    

  );

}

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

```js

import React from 'react';

import { useQRCode } from 'next-qrcode';

function App() {

  const { Image } = useQRCode();

  return (

    

  );

}

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](https://github.com/Bunlong/next-qrcode/blob/master/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](https://github.com/reactpatterns/reactpatterns) – React patterns & techniques to use in development for React Developer.

* [React Papaparse](https://github.com/Bunlong/react-papaparse) – The fastest in-browser CSV (or delimited text) parser for React.

* [Next Share](https://github.com/Bunlong/next-share) – Social media share buttons for your next React apps.

* [Next Time Ago](https://github.com/Bunlong/next-time-ago) – A lightweight tiny time-ago component for your next React apps.

## ⚖️ License

The MIT License [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)