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: {
    dark: '#000',
    light: '#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 | | color.foreground | string | #000 | Foreground color (hex) | No | | color.background | string | #fff | Background color (hex) | No |

License

MIT License