use-qrcode-hook

A React Hook for generating QR codes.

View demo ➔

Installation

Using npm:

npm install use-qrcode-hook

Using yarn:

yarn add use-qrcode-hook

Using pnpm:

pnpm add use-qrcode-hook

Usage

1. Import the hook:

import useQRCode from 'use-qrcode-hook';

2. Use the hook in your component:

const { qrCodeDataUrl, error, isLoading } = useQRCode('https://example.com', {
  width: 200,
  color: {
    foreground: '#000',
    background: '#fff',
  }
});

Example:

import useQRCode from 'use-qrcode-hook';

const MyComponent = () => {
  const { qrCodeDataUrl, error, isLoading } = useQRCode('https://example.com', {
    width: 200,
    color: {
      foreground: '#000',
      background: '#fff',
    }
  });

  if (isLoading) return <div>Loading...</div>;
  if (error) return <div>Error: {error.message}</div>;
  
  return <img src={qrCodeDataUrl} alt="QR Code" />;
};

Options

The first parameter is the URL to encode in the QR code, and this is the only required parameter. The second parameter is an object with the following options:

Parameter	Type	Default	Description	Required
width	number	200	QR code width in pixels	No
margin	number	1	QR code margin in pixels	No
color.foreground	string	#000	Foreground color (hex)	No
color.background	string	#fff	Background color (hex)	No

License

MIT License