React QRCode Hook 📸

React hook for creating QR Code data urls

Install

yarn add react-qrcode-hook

or

npm install --save react-qrcode-hook

Usage

This hook returns a data URL which can be added as the source to an image. The only parameter to the hook function requires is the string you want to codify.

import useQrCode from "react-qrcode-hook";

function App() {
  const qrCode = useQrCode("Hello There");
  return (
    <div
      style={{
        width: "100%",
        height: "100%",
        display: "flex",
        alignItems: "center",
        justifyContent: "center"
      }}
    >
      <img alt="qr code" src={qrCode} />
    </div>
  );
}

This will produce a QR Code as follows.

Advanced

You can also pass an options object as a second parameter to the hook as follows. You can see a complete list of options here.

const qrCode = useQrCode(text, options);

And here is some sample code that uses options.

const options = {
  margin: 5,
  scale: 10,
  color: {
    dark: '#ffffff',
    light: '#000099',
  },
};

function App() {
  const qrCode = useQrCode('https://americanexpress.io', options);
  return (
    <div
      style={{
        width: '100%',
        height: '100%',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
      }}
    >
      <img alt="qr code" src={qrCode} />
    </div>
  );
}

The code above produces this QR Code. Notice how it changed the colors, size, and padding of the image?

Example

In the project folder:

yarn
yarn example

or

npm install
npm run example

Contributors

Thanks goes to these wonderful people (emoji key):

This project follows the all-contributors specification. Contributions of any kind welcome!