A QRCode component for use with React.

Related tags

qrcode.react
Overview

qrcode.react

A React component to generate QR codes.

Installation

npm install qrcode.react

Usage

var React = require('react');
var QRCode = require('qrcode.react');

React.render(
  <QRCode value="http://facebook.github.io/react/" />,
  mountNode
);

Available Props

prop type default value
value string
renderAs string ('canvas' 'svg') 'canvas'
size number 128
bgColor string (CSS color) "#FFFFFF"
fgColor string (CSS color) "#000000"
level string ('L' 'M' 'Q' 'H') 'L'
includeMargin boolean false
imageSettings object (see below)

imageSettings

field type default value
src string
x number none, will center
y number none, will center
height number 10% of size
width number 10% of size
excavate boolean false

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

LICENSE ISC

Issues
  • add logo to qrcode

    add logo to qrcode

    add logo to qrcode, just add image url.

    opened by cssivision 12
  • Convert qr code in base64

    Convert qr code in base64

    Hi @zpao , would it be possible to create a function that as a return value converts the image to base64? QRCode.base64("text);

    opened by Angelk90 9
  • Add a new className prop into component

    Add a new className prop into component

    When you integrate the QRCode component in your projects sometimes you need to add CSS classes in order to be possible apply custom CSS style properties like padding, margin, etc.

    Actually, my current workaround to add custom classes into the QRCode component is using a wrapper div, something like:

    // React code
    <div className="qr-code-custom-class">
        <QRCode {...props} />
    </div>
    

    So, I think we could add as QRCode prop the className attribute in order to be possible add custom classNames into the QRCode canvas.

    Demo:

    screen shot 2017-09-28 at 11 13 06

    Linter Results:

    screen shot 2017-09-28 at 10 59 43

    Also in this commit:

    • Updated the README.md file in order to add the new prop in component documentation.
    • Updated demo.js in order to be possible test the new component prop.
    opened by victorfern91 8
  • QR creates wrong authenticator on iPhone X

    QR creates wrong authenticator on iPhone X

    SampleQR I've attached a sample QR code with the generator text: INWTUSRBM5RUO6JX. If I scan using Google Authenticator for iOs on iPhone X with iOs 13.1.3, I get the following code at some time: 879 257 If I scan the sam QR using Google Authenticator for Android, on a Huawei Mate 10 Pro, Android 9, at the same time I get the following code: 210 354 But if I create the authenticator on iOs using the text provided INWTUSRBM5RUO6JX, the authenticator will provide me with the same code (at that same time obviously) as the one from the Android authenticator, which is 210 354. Nevertheless, going forward, if I try to validate the 2fa code, the 210 354 is the right one.

    Need help with this? I have users using iPhones that cannot enable 2fa. Thanks!

    opened by dandamian83 6
  • QRCode only displays the last value when iterated

    QRCode only displays the last value when iterated

    Let's say you have addresses

    const addresses = [1, 2, 3]

    And now if we Parent and we map the addresses to generate a list of QRs.

    addresses.map(address => {
    	return <AddressItem address={address} />
    }
    

    Inside the child <AddressItem />

    We have something

    const AddressItem = ({address}) => (
      <QRCode value={address} />
    )
    

    The QR would generate a QR from the last value (3 in this case)

    Any propositions how we could solve this?

    opened by indreklasn 6
  • Hardcoded width and height

    Hardcoded width and height

    Is there a reason that width and height are "hardcoded" into style attribute? It's quite painful to try too get canvas responsive for different mobile screens. The only option is to use !important which is a bit hairy workaround.

    canvas {
        height: auto !important;
        width: 100% !important;
        max-width: 300px;
     }
    

    I get that rendering for retina (HiDPI) screens might be an issue to get a sharp image.

    opened by jozan 6
  • Add ECC levels support

    Add ECC levels support

    It will be nice to add support for handling error levels accuracy.

    Keep up the good work.

    Regards, Chris

    opened by ziogaschr 5
  • Unknown Prop Warning for 'includeMargin'

    Unknown Prop Warning for 'includeMargin'

    everything works fine, but it would be nice to get rid of this annoying warning.

    Warning: React does not recognize the 'includeMargin' prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercaseincludemargininstead. If you accidentally passed it from a parent component, remove it from the DOM element.

    opened by NikolaDojic 5
  • PureRenderMixin

    PureRenderMixin

    opened by dcousens 5
  • Validate if string is null

    Validate if string is null

    null

    opened by lucodifier 4
  • Cannot read properties of undefined (reading 'lenght')

    Cannot read properties of undefined (reading 'lenght')

    Error:

    /node_modules/qrcode.react/lib/index.js:52 49 | function convertStr(str) { 50 | var out = ''; 51 |

    52 | for (var i = 0; i < str.length; i++) { 53 | var charcode = str.charCodeAt(i); 54 | 55 | if (charcode < 0x0080) {

    Solution:

    function convertStr(str: string): string { let out = ''; if (str){ for (let i = 0; i < str.length; i++) { let charcode = str.charCodeAt(i); if (charcode < 0x0080) { out += String.fromCharCode(charcode); } else if (charcode < 0x0800) { out += String.fromCharCode(0xc0 | (charcode >> 6)); out += String.fromCharCode(0x80 | (charcode & 0x3f)); } else if (charcode < 0xd800 || charcode >= 0xe000) { out += String.fromCharCode(0xe0 | (charcode >> 12)); out += String.fromCharCode(0x80 | ((charcode >> 6) & 0x3f)); out += String.fromCharCode(0x80 | (charcode & 0x3f)); } else { // This is a surrogate pair, so we'll reconsitute the pieces and work // from that i++; charcode = 0x10000 + (((charcode & 0x3ff) << 10) | (str.charCodeAt(i) & 0x3ff)); out += String.fromCharCode(0xf0 | (charcode >> 18)); out += String.fromCharCode(0x80 | ((charcode >> 12) & 0x3f)); out += String.fromCharCode(0x80 | ((charcode >> 6) & 0x3f)); out += String.fromCharCode(0x80 | (charcode & 0x3f)); } } } return out; }

    opened by lucodifier 3
  • feature-request/add-custom-color-to-squares

    feature-request/add-custom-color-to-squares

    A way to add colors to one or more of the 3 squares.

    opened by dougg0k 2
  • Error: 'default' is not exported by node_modules/qrcode.react/lib/index.js

    Error: 'default' is not exported by node_modules/qrcode.react/lib/index.js

    I'm getting the following error when trying to build this package using rollup

    Error: 'default' is not exported by node_modules/qrcode.react/lib/index.js
    

    https://rollupjs.org/guide/en/#error-name-is-not-exported-by-module

    does it make sense to upgrade this package to be built using rollup, so we have commonjs and esm entrypoints?

    opened by sibelius 2
  • Renamed componentWillReceiveProps

    Renamed componentWillReceiveProps

    Replaced componentWillReceiveProps with getDerivedStateFromProps to avoid a warning appears in both production and development

    opened by 3ba2ii 2
  • how to control margin size

    how to control margin size

    how to control margin size

    opened by jonnywang 1
  • SecurityError: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.

    SecurityError: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.

    I trying to download the QR code by click a button. And i get error: SecurityError: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported. This is my code for action click button download QR code.

    const downloadQR = () => {
      const canvas = document.getElementById("123456");
      const pngUrl = canvas
        .toDataURL("image/png")
        .replace("image/png", "image/octet-stream");
      let downloadLink = document.createElement("a");
      downloadLink.href = pngUrl;
      downloadLink.download = "123456.png";
      document.body.appendChild(downloadLink);
      downloadLink.click();
      document.body.removeChild(downloadLink);
    };
    

    I found some solution is add crossOrigin="anonymous" to include image in QR code, refer here. Can u check it in your code from this line?

    opened by kaiel2020 3
  • can't get the ref

    can't get the ref

    same issue

    opened by yangmiemie233 3
Releases(v1.0.0)
Owner
Paul O’Shannessy
I do open source things at @facebook.
Paul O’Shannessy
React-Godfather aims to explore an alternative mental model for function components.

React-Godfather "Look ma, no Hooks!" React-Godfather aims to explore an alternative mental model for function components. It adds a thin layer between

John Kapolos 17 Sep 20, 2021
A component for React that utilizes the Counterpart module to provide multi-lingual/localized text content.

React Translate Component Translate is a component for React that utilizes the Counterpart module and the Interpolate component to provide multi-lingu

Martin Andert 325 Apr 14, 2021
🌊🐷 Utility for generalized composition of React components

???? Utility for generalized composition of React components

Enki 279 Oct 4, 2021
The next generation state management library for React

The next generation state management library for React

Bytedance Inc. 150 Sep 18, 2021
📏 A resizable component for React.

?? A resizable component for React.

bokuweb 1.5k Oct 17, 2021
A Fetch Library Support React New Suspense SSR

use-suspense-fetch A data fetching library for React Suspense. inspired by use-asset Feature use LRU Cache support create custom cache support React 1

Snake 6 Jul 12, 2021
CSS media queries for React

react-media react-media is a CSS media query component for React. A <Media> component listens for matches to a CSS media query and renders stuff based

React Training 2.4k Oct 15, 2021
A ReactJS password recovery box component built using the FluentUI library

A ReactJS password recovery box component built using the FluentUI library

Boia Alexandru 2 Sep 20, 2021
A lightweight react library that converts raw HTML to a React DOM structure.

A lightweight react library that converts raw HTML to a React DOM structure.

Arve Knudsen 652 Oct 17, 2021
HTML to React parser that works on both the server (Node.js) and the client (browser):

HTML to React parser that works on both the server (Node.js) and the client (browser):

Mark 1k Oct 19, 2021
iOS Today Widget in React Native

React Native Today Widget Experimental library investigating limits of implementation iOS App Extensions using React Native. Sample result from Comple

Matěj Kříž 343 Oct 3, 2021
Collection of Google fonts as typeface data for usage with three.js, react-three-fiber, and other tools.

Collection of Google fonts as typeface data for usage with three.js, react-three-fiber, and other tools.

Components AI 44 Oct 3, 2021
Truncate a long string in the middle, instead of the end.

React Middle Ellipsis Check out the demo. Adding ellipses to the end of long text is cool. But not always! Sometimes the end of the text contains vita

bluepeter 41 Sep 8, 2021
A React wrapper for signature pad

react-signature-pad-wrapper A React wrapper for signature pad. Installation This package is available through npm: npm install --save react-signature-

Michael Dzjaparidze 64 Oct 14, 2021
Extended utils for ⚛️ React.Children data structure that adds recursive filter, map and more methods to iterate nested children.

React Children Utilities Recursive and extended utils for React children opaque data structure. Installation Available as a package and can be added t

Fernando Pasik 183 Oct 5, 2021
Utility Components for determining whether elements are in the center of the screen.

@n1ru4l/react-in-center-of-screen Utility Components for determining whether elements are in the center of the screen. Codesandbox Quick Demo: https:/

Laurin Quast 12 May 29, 2021
React Refresh Token with JWT and Axios Interceptors example

Buid React JWT Refresh Token example with Axios Interceptors - Refresh Token in React.js, Axios silent refresh JWT token example

null 18 Sep 30, 2021
Easily create presentation board using React

React Speaker Board Easily create presentation board using React. Quick Usage It install react-speaker-board running this comand. $ yarn add react-spe

nappa 6 Oct 14, 2021
🤖 React Native Android widgets bridged to JS, a proof of concept

React Native Android Widget Proof Of Concept ?? Using React Native and having Android widgets is possible. Create buttons in Java / Android XML to tri

Netbeast 186 Sep 21, 2021