### Install next-qrcode

Source: https://github.com/bunlong/next-qrcode/blob/master/_autodocs/REFERENCE.md

Install the library using npm or yarn. Ensure Node.js and npm/yarn versions meet the requirements.

```bash
npm install next-qrcode
# or
yarn add next-qrcode
```

--------------------------------

### Install with NPM

Source: https://github.com/bunlong/next-qrcode/blob/master/_autodocs/integration-guide.md

Use this command to install the library using npm.

```bash
npm install next-qrcode
```

--------------------------------

### Install with Yarn

Source: https://github.com/bunlong/next-qrcode/blob/master/_autodocs/integration-guide.md

Use this command to install the library using Yarn.

```bash
yarn add next-qrcode
```

--------------------------------

### Install next-qrcode with npm

Source: https://github.com/bunlong/next-qrcode/blob/master/README.md

Install the next-qrcode package using npm. This command adds the library as a dependency to your project.

```bash
npm install next-qrcode --save
```

--------------------------------

### Install next-qrcode with yarn

Source: https://github.com/bunlong/next-qrcode/blob/master/README.md

Install the next-qrcode package using yarn. This command adds the library as a dependency to your project.

```bash
yarn add next-qrcode --save
```

--------------------------------

### Run Next.js Development Server

Source: https://github.com/bunlong/next-qrcode/blob/master/supports/create-next-app/README.md

Use one of these commands to start the Next.js development server.

```bash
npm run dev
```

```bash
yarn dev
```

```bash
pnpm dev
```

--------------------------------

### Text Prop Examples

Source: https://github.com/bunlong/next-qrcode/blob/master/_autodocs/api-reference/SVG-Component.md

Examples of valid string values for the 'text' prop, including URLs and vCard format.

```typescript
text="https://example.com"
```

```typescript
text="https://github.com/Bunlong/next-qrcode"
```

```typescript
text="HTTPS://EXAMPLE.COM"
```

```typescript
text="BEGIN:VCARD..."  // vCard format
```

--------------------------------

### QR Code with Positioned Logo Example

Source: https://github.com/bunlong/next-qrcode/blob/master/_autodocs/api-reference/Canvas-Component.md

This example demonstrates placing a logo at specific coordinates (x, y) on the QR code. The `width` of the logo is also specified. Ensure the logo does not obscure too much of the QR code for scannability.

```typescript
import { useQRCode } from 'next-qrcode';

export function QRCodeWithPositionedLogo() {
  const { Canvas } = useQRCode();

  return (
    <Canvas
      text="https://example.com"
      options={{
        errorCorrectionLevel: 'H',
        margin: 4,
        width: 300,
      }}
      logo={{
        src: '/logo.png',
        options: {
          width: 60,
          x: 120,
          y: 120,
        },
      }}
    />
  );
}
```

--------------------------------

### LogoOptions Example with Centering

Source: https://github.com/bunlong/next-qrcode/blob/master/_autodocs/types.md

Demonstrates how to use LogoOptions to center a logo on a QR code by leaving x and y undefined.

```typescript
const logoOptions: LogoOptions = {
  width: 50,
  x: undefined,
  y: undefined, // Logo will center
};
```

--------------------------------

### Logo Example with Custom Options

Source: https://github.com/bunlong/next-qrcode/blob/master/_autodocs/types.md

Shows how to define a logo with a specific source and custom sizing and positioning options.

```typescript
const logo: Logo = {
  src: '/company-logo.png',
  options: {
    width: 50,
    x: 75,
    y: 75,
  },
};
```

--------------------------------

### IQRCode Example Usage

Source: https://github.com/bunlong/next-qrcode/blob/master/_autodocs/types.md

Demonstrates how to use the IQRCode interface to configure QR code generation with custom options and a logo.

```typescript
const props: IQRCode = {
  text: 'https://github.com/Bunlong/next-qrcode',
  options: {
    errorCorrectionLevel: 'M',
    margin: 3,
    scale: 4,
    width: 200,
    color: {
      dark: '#010599FF',
      light: '#FFBF60FF',
    },
  },
  logo: {
    src: '/logo.png',
    options: {
      width: 30,
    },
  },
};
```

--------------------------------

### Basic QR Code Configuration

Source: https://github.com/bunlong/next-qrcode/blob/master/_autodocs/REFERENCE.md

Example configuration for a basic QR code. Use this for general-purpose QR codes.

```json
{ "errorCorrectionLevel": "M", "margin": 4, "scale": 4 }
```

--------------------------------

### Responsive Canvas QR Code Example

Source: https://github.com/bunlong/next-qrcode/blob/master/_autodocs/api-reference/Canvas-Component.md

This example creates a responsive QR code by adjusting its width based on the screen size using the `useState` hook and `window.innerWidth`. The `width` option in `options` is conditionally set.

```typescript
import { useQRCode } from 'next-qrcode';
import { useState } from 'react';

export function ResponsiveQRCode() {
  const { Canvas } = useQRCode();
  const [isMobile, setIsMobile] = useState(window.innerWidth < 768);

  return (
    <Canvas
      text="https://example.com"
      options={{
        errorCorrectionLevel: 'M',
        margin: 2,
        width: isMobile ? 150 : 250,
        color: {
          dark: '#010599FF',
          light: '#FFBF60FF',
        },
      }}
    />
  );
}
```

--------------------------------

### Basic Text Encoding Examples

Source: https://github.com/bunlong/next-qrcode/blob/master/_autodocs/api-reference/Canvas-Component.md

Demonstrates encoding different types of text data into QR codes using the 'text' prop.

```typescript
text="https://github.com/Bunlong/next-qrcode"
```

```typescript
text="https://example.com"
```

```typescript
text="contact@example.com"
```

```typescript
text="tel:+1234567890"
```

--------------------------------

### Basic Canvas QR Code Example

Source: https://github.com/bunlong/next-qrcode/blob/master/_autodocs/api-reference/Canvas-Component.md

A simple example of rendering a QR code using the Canvas component. It takes a text string and basic options for error correction, margin, scale, and width.

```typescript
import { useQRCode } from 'next-qrcode';

export function BasicQRCode() {
  const { Canvas } = useQRCode();

  return (
    <Canvas
      text="https://example.com"
      options={{
        errorCorrectionLevel: 'M',
        margin: 4,
        scale: 4,
        width: 200,
      }}
    />
  );
}
```

--------------------------------

### Colored QR Code Example

Source: https://github.com/bunlong/next-qrcode/blob/master/_autodocs/api-reference/Canvas-Component.md

This example demonstrates how to customize the QR code colors using the `color` option, specifying both dark and light module colors. It also sets error correction level, margin, scale, and width.

```typescript
import { useQRCode } from 'next-qrcode';

export function ColoredQRCode() {
  const { Canvas } = useQRCode();

  return (
    <Canvas
      text="https://github.com/Bunlong/next-qrcode"
      options={{
        errorCorrectionLevel: 'H',
        margin: 3,
        scale: 4,
        width: 200,
        color: {
          dark: '#010599FF',    // Blue
          light: '#FFBF60FF',   // Orange
        },
      }}
    />
  );
}
```

--------------------------------

### Unit Test QR Code Rendering (Jest)

Source: https://github.com/bunlong/next-qrcode/blob/master/_autodocs/integration-guide.md

Example of a unit test using Jest and @testing-library/react to verify that the QR code canvas element is rendered. Ensure 'next-qrcode' is installed.

```typescript
import { render, screen } from '@testing-library/react';
import { useQRCode } from 'next-qrcode';

describe('QRCode component', () => {
  it('renders canvas element', () => {
    function TestComponent() {
      const { Canvas } = useQRCode();
      return <Canvas data-testid="qrcode" text="test" />;
    }

    render(<TestComponent />);
    expect(screen.getByTestId('qrcode')).toBeInTheDocument();
  });
});
```

--------------------------------

### High-Resolution Print QR Code Example

Source: https://github.com/bunlong/next-qrcode/blob/master/_autodocs/api-reference/Canvas-Component.md

This example generates a high-resolution QR code suitable for printing by increasing the `scale` option significantly. It also sets error correction level and standard colors.

```typescript
import { useQRCode } from 'next-qrcode';

export function PrintQRCode() {
  const { Canvas } = useQRCode();

  return (
    <Canvas
      text="https://example.com"
      options={{
        errorCorrectionLevel: 'H',
        margin: 4,
        scale: 10,
        color: {
          dark: '#000000FF',
          light: '#FFFFFFFF',
        },
      }}
    />
  );
}
```

--------------------------------

### Minimal QR Code Integration

Source: https://github.com/bunlong/next-qrcode/blob/master/_autodocs/integration-guide.md

A basic example demonstrating how to render a QR code using the Canvas component with a default URL.

```typescript
import { useQRCode } from 'next-qrcode';

export function QRCodeWidget() {
  const { Canvas } = useQRCode();
  
  return <Canvas text="https://example.com" />;
}
```

--------------------------------

### Quick Start with Canvas QR Code

Source: https://github.com/bunlong/next-qrcode/blob/master/_autodocs/00-START-HERE.md

This snippet demonstrates the basic usage of the `useQRCode` hook to render a QR code using the Canvas format. It requires importing the hook and the Canvas component.

```typescript
import { useQRCode } from 'next-qrcode';

function MyQRCode() {
  const { Canvas } = useQRCode();
  
  return (
    <Canvas
      text="https://example.com"
      options={{ width: 200 }}
    />
  );
}
```

--------------------------------

### QR Code with Centered Logo Example

Source: https://github.com/bunlong/next-qrcode/blob/master/_autodocs/api-reference/Canvas-Component.md

This example shows how to embed a logo in the center of the QR code. The logo is automatically centered by leaving its `x` and `y` options undefined. High error correction is recommended when using logos.

```typescript
import { useQRCode } from 'next-qrcode';

export function QRCodeWithLogo() {
  const { Canvas } = useQRCode();

  return (
    <Canvas
      text="https://example.com"
      options={{
        errorCorrectionLevel: 'H',
        margin: 4,
        width: 250,
        color: {
          dark: '#000000FF',
          light: '#FFFFFFFF',
        },
      }}
      logo={{
        src: '/company-logo.png',
        options: {
          width: 50,
          // x and y undefined = auto-center
        },
      }}
    />
  );
}
```

--------------------------------

### Options Prop Example for SVG

Source: https://github.com/bunlong/next-qrcode/blob/master/_autodocs/api-reference/SVG-Component.md

Demonstrates how to configure QR code appearance using the 'options' prop for SVG rendering. Supports errorCorrectionLevel, margin, width, and color.

```typescript
options={{
  errorCorrectionLevel: 'M',
  margin: 2,
  width: 200,
  color: {
    dark: '#010599FF',
    light: '#FFBF60FF',
  },
}}
```

--------------------------------

### QR Code Image Options Example

Source: https://github.com/bunlong/next-qrcode/blob/master/_autodocs/api-reference/Image-Component.md

Configures the Image component's appearance and format using the `options` prop. Supports JPEG, quality settings, error correction, margins, scale, and custom colors.

```typescript
options={{
  type: 'image/jpeg',
  quality: 0.92,
  errorCorrectionLevel: 'M',
  margin: 3,
  scale: 4,
  width: 200,
  color: {
    dark: '#010599FF',
    light: '#FFBF60FF',
  },
}}
```

--------------------------------

### useQRCode Hook Usage

Source: https://github.com/bunlong/next-qrcode/blob/master/_autodocs/REFERENCE.md

Example of destructuring the Canvas, SVG, and Image components from the useQRCode hook.

```typescript
const { Canvas, SVG, Image } = useQRCode();
```

--------------------------------

### Basic PNG QR Code Image

Source: https://github.com/bunlong/next-qrcode/blob/master/_autodocs/api-reference/Image-Component.md

Generates a basic PNG QR code for a given URL. Ensure the 'next-qrcode' library is installed and imported.

```typescript
import { useQRCode } from 'next-qrcode';

export function BasicImageQRCode() {
  const { Image } = useQRCode();

  return (
    <Image
      text="https://example.com"
      options={{
        type: 'image/png',
        errorCorrectionLevel: 'M',
        margin: 4,
        scale: 4,
        width: 200,
      }}
    />
  );
}
```

--------------------------------

### Image Component with Format Options

Source: https://github.com/bunlong/next-qrcode/blob/master/_autodocs/REFERENCE.md

Example of using the Image component to render a QR code as a data URL. Supports specifying image type and quality for lossy formats.

```typescript
<Image
  text="https://example.com"
  options={{
    type: 'image/jpeg',
    quality: 0.92,
    width: 200,
  }}
/>
```

--------------------------------

### Basic React Functional Component with QRCode

Source: https://github.com/bunlong/next-qrcode/blob/master/_autodocs/REFERENCE.md

Demonstrates the basic usage of the `useQRCode` hook to render a QR code using the Canvas format within a React functional component. Ensure `react` is installed as a peer dependency.

```typescript
import { useQRCode } from 'next-qrcode';

export function MyQRCode() {
  const { Canvas } = useQRCode();
  
  return (
    <Canvas
      text="https://example.com"
      options={{ width: 200 }}
    />
  );
}
```

--------------------------------

### SVG QR Code for Web Display with Styling

Source: https://github.com/bunlong/next-qrcode/blob/master/_autodocs/api-reference/SVG-Component.md

An example of using the SVG component for web display, including a wrapper div and a label, with external CSS for styling.

```typescript
import { useQRCode } from 'next-qrcode';
import './qrcode.css';

export function WebQRCode() {
  const { SVG } = useQRCode();

  return (
    <div className="qrcode-wrapper">
      <SVG
        text="https://example.com"
        options={{
          errorCorrectionLevel: 'M',
          margin: 1,
          width: 180,
          color: {
            dark: '#333333FF',
            light: '#FFFFFFFF',
          },
        }}
      />
      <p className="qrcode-label">Scan to visit</p>
    </div>
  );
}
```

--------------------------------

### Logo Overlay - Auto-centered

Source: https://github.com/bunlong/next-qrcode/blob/master/_autodocs/api-reference/Canvas-Component.md

Example of overlaying a logo on the QR code with automatic centering. The logo's width is specified, and its position is calculated by default.

```typescript
logo={{
  src: '/logo.png',
  options: {{ width: 40 }},
}}
```

--------------------------------

### Next.js Client Component with Dynamic Options

Source: https://github.com/bunlong/next-qrcode/blob/master/_autodocs/integration-guide.md

Render a QR code in a Next.js client component, dynamically fetching options from URL search parameters. This example uses the 'use client' directive and 'useSearchParams'.

```typescript
'use client';

import { useSearchParams } from 'next/navigation';
import { useQRCode } from 'next-qrcode';

export function DynamicQRCode() {
  const { Canvas } = useQRCode();
  const searchParams = useSearchParams();
  const text = searchParams.get('url') || 'https://example.com';

  return (
    <Canvas
      text={text}
      options={{
        errorCorrectionLevel: 'M',
        margin: 3,
        width: 200,
      }}
    />
  );
}
```

--------------------------------

### Render QR Code with Canvas

Source: https://github.com/bunlong/next-qrcode/blob/master/README.md

Use the useQRCode hook to get the Canvas component for rendering QR codes. Configure the QR code's text, error correction level, margin, scale, width, and colors.

```jsx
import React from 'react';
import { useQRCode } from 'next-qrcode';

function App() {
  const { Canvas } = useQRCode();

  return (
    <Canvas
      text={'https://github.com/bunlong/next-qrcode'}
      options={{
        errorCorrectionLevel: 'M',
        margin: 3,
        scale: 4,
        width: 200,
        color: {
          dark: '#010599FF',
          light: '#FFBF60FF',
        },
      }}
    />
  );
}

export default App;
```

--------------------------------

### Main Entry Point Export

Source: https://github.com/bunlong/next-qrcode/blob/master/_autodocs/module-structure.md

The primary export from the main module, making `useQRCode` the public API.

```typescript
export { useQRCode } from './useQRCode';
```

--------------------------------

### Project File Structure

Source: https://github.com/bunlong/next-qrcode/blob/master/_autodocs/00-START-HERE.md

This snippet shows the directory structure of the next-qrcode project, highlighting the location of the main documentation files and API component references.

```text
/workspace/home/output/
│
├── 00-START-HERE.md                  ← You are here
├── INDEX.md                          ← Complete navigation index
├── REFERENCE.md                      ← Main overview
│
├── API Components (4 files)
├── api-reference/
│   ├── useQRCode.md                 ← The main hook
│   ├── Canvas-Component.md          ← Canvas rendering + logo
│   ├── SVG-Component.md             ← SVG rendering
│   └── Image-Component.md           ← Image rendering (PNG/JPEG/WebP)
│
├── Reference Documentation (6 files)
├── types.md                          ← All type definitions
├── configuration.md                  ← All config options
├── errors.md                         ← Error handling
├── module-structure.md               ← Architecture internals
├── integration-guide.md              ← Best practices & patterns
│
└── SUMMARY.txt                       ← Quick statistics

```

--------------------------------

### Logo Prop Ignored Example

Source: https://github.com/bunlong/next-qrcode/blob/master/_autodocs/api-reference/Image-Component.md

Illustrates that the `logo` prop is not supported by the Image component and will be ignored if provided.

```typescript
// This logo prop will have no effect
logo={{
  src: '/logo.png',
  options: { width: 40 },
}}
```

--------------------------------

### Basic Canvas Usage

Source: https://github.com/bunlong/next-qrcode/blob/master/_autodocs/api-reference/useQRCode.md

Demonstrates how to use the Canvas component factory returned by `useQRCode` to render a basic QR code.

```APIDOC
## Canvas Component

### Description
Renders a QR code using an HTML canvas element.

### Usage
```typescript
import React from 'react';
import { useQRCode } from 'next-qrcode';

export default function QRCodeExample() {
  const { Canvas } = useQRCode();

  return (
    <Canvas
      text={'https://github.com/Bunlong/next-qrcode'}
      options={{
        errorCorrectionLevel: 'M',
        margin: 3,
        scale: 4,
        width: 200,
        color: {
          dark: '#010599FF',
          light: '#FFBF60FF',
        },
      }}
    />
  );
}
```

### Props
- `text` (string): The data to encode in the QR code.
- `options` (object): Configuration options for the QR code generation.
  - `errorCorrectionLevel` (string): Error correction level ('L', 'M', 'Q', 'H').
  - `margin` (number): Margin around the QR code.
  - `scale` (number): Scale factor for the QR code modules.
  - `width` (number): Desired width of the QR code.
  - `color` (object): Color configuration.
    - `dark` (string): Color of the dark modules.
    - `light` (string): Color of the light modules.
```

--------------------------------

### Import useQRCode with ES Modules

Source: https://github.com/bunlong/next-qrcode/blob/master/_autodocs/INDEX.md

Use this import statement for ES Modules, common in modern JavaScript projects.

```typescript
import { useQRCode } from 'next-qrcode';
```

--------------------------------

### Import useQRCode with CommonJS

Source: https://github.com/bunlong/next-qrcode/blob/master/_autodocs/INDEX.md

Use this import statement when working with CommonJS module systems.

```javascript
const { useQRCode } = require('next-qrcode');
```

--------------------------------

### Canvas Component with Logo Overlay

Source: https://github.com/bunlong/next-qrcode/blob/master/_autodocs/REFERENCE.md

Example of using the Canvas component to render a QR code with a logo overlay. Specifies the logo source and its options.

```typescript
<Canvas
  text="https://example.com"
  options={{ width: 200 }}
  logo={{ src: '/logo.png', options: { width: 40 } }}
/>
```

--------------------------------

### Rollup Build Configuration

Source: https://github.com/bunlong/next-qrcode/blob/master/_autodocs/module-structure.md

Configures Rollup for building the next-qrcode library, specifying input, output formats, external dependencies, and build plugins.

```javascript
input: 'src/next-qrcode.ts'
output: [
  { file: 'dist/next-qrcode.js', format: 'cjs' },
  { file: 'dist/next-qrcode.es.js', format: 'esm' }
]
external: ['react', 'react-dom', 'qrcode']
plugins: [
  typescript(),
  babel(),
  commonjs(),
  terser()
]
```

--------------------------------

### SVG Component Rendering

Source: https://github.com/bunlong/next-qrcode/blob/master/_autodocs/REFERENCE.md

Example of using the SVG component to render a QR code with custom color options and margin. Suitable for scalable vector graphics.

```typescript
<SVG
  text="https://example.com"
  options={{
    margin: 2,
    width: 200,
    color: { dark: '#010599FF', light: '#FFBF60FF' },
  }}
/>
```

--------------------------------

### Rendering QR Codes in Multiple Formats (Canvas, SVG, Image)

Source: https://github.com/bunlong/next-qrcode/blob/master/_autodocs/REFERENCE.md

Illustrates how to render QR codes using different output formats: Canvas, SVG, and Image. Each format is accessed via the `useQRCode` hook and rendered as a separate element. Requires `react`.

```typescript
import { useQRCode } from 'next-qrcode';

export function AllFormats() {
  const { Canvas, SVG, Image } = useQRCode();
  const text = 'https://example.com';

  return (
    <div>
      <div>
        <h2>Canvas</h2>
        <Canvas text={text} options={{ width: 150 }} />
      </div>
      <div>
        <h2>SVG</h2>
        <SVG text={text} options={{ width: 150 }} />
      </div>
      <div>
        <h2>Image</h2>
        <Image text={text} options={{ width: 150 }} />
      </div>
    </div>
  );
}
```

--------------------------------

### Import useQRCode and Types with TypeScript

Source: https://github.com/bunlong/next-qrcode/blob/master/_autodocs/INDEX.md

Import the hook and relevant types when using TypeScript for enhanced type safety.

```typescript
import { useQRCode, IQRCode, QRCodeOptions } from 'next-qrcode';
```

--------------------------------

### WebP Data URL Structure

Source: https://github.com/bunlong/next-qrcode/blob/master/_autodocs/api-reference/Image-Component.md

Example of a WebP data URL structure. The base64-encoded data can be directly embedded in img elements, saved to files, or sent to servers.

```dataurl
data:image/webp;base64,UklGRiYAAABX...
```

--------------------------------

### Importing qrcode library (CommonJS)

Source: https://github.com/bunlong/next-qrcode/blob/master/_autodocs/module-structure.md

This snippet shows the standard way to import the 'qrcode' library using CommonJS syntax, which is required to use its QR code generation methods.

```typescript
const QRCode = require('qrcode');
```

--------------------------------

### JPEG Data URL Structure

Source: https://github.com/bunlong/next-qrcode/blob/master/_autodocs/api-reference/Image-Component.md

Example of a JPEG data URL structure. The base64-encoded data can be directly embedded in img elements, saved to files, or sent to servers.

```dataurl
data:image/jpeg;base64,/9j/4AAQSkZJRgABA...
```

--------------------------------

### Importing useQRCode Hook

Source: https://github.com/bunlong/next-qrcode/blob/master/_autodocs/INDEX.md

Import the useQRCode hook from the next-qrcode library to access its components.

```typescript
import { useQRCode } from 'next-qrcode';

const { Canvas, SVG, Image } = useQRCode();
```

--------------------------------

### PNG Data URL Structure

Source: https://github.com/bunlong/next-qrcode/blob/master/_autodocs/api-reference/Image-Component.md

Example of a PNG data URL structure. The base64-encoded data can be directly embedded in img elements, saved to files, or sent to servers.

```dataurl
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA...
```

--------------------------------

### Image Usage

Source: https://github.com/bunlong/next-qrcode/blob/master/_autodocs/api-reference/useQRCode.md

Shows how to use the Image component factory to render a QR code as an HTML `<img>` element with a data URL.

```APIDOC
## Image Component

### Description
Renders a QR code as an HTML `<img>` element using a data URL.

### Usage
```typescript
import React from 'react';
import { useQRCode } from 'next-qrcode';

export default function ImageQRCode() {
  const { Image } = useQRCode();

  return (
    <Image
      text={'https://example.com'}
      options={{
        type: 'image/jpeg',
        quality: 0.92,
        errorCorrectionLevel: 'M',
        margin: 3,
        scale: 4,
        width: 200,
        color: {
          dark: '#010599FF',
          light: '#FFBF60FF',
        },
      }}
    />
  );
}
```

### Props
- `text` (string): The data to encode in the QR code.
- `options` (object): Configuration options for the QR code generation.
  - `type` (string): MIME type of the image (e.g., 'image/png', 'image/jpeg').
  - `quality` (number): Image quality for JPEG format (0 to 1).
  - `errorCorrectionLevel` (string): Error correction level ('L', 'M', 'Q', 'H').
  - `margin` (number): Margin around the QR code.
  - `scale` (number): Scale factor for the QR code modules.
  - `width` (number): Desired width of the QR code.
  - `color` (object): Color configuration.
    - `dark` (string): Color of the dark modules.
    - `light` (string): Color of the light modules.
```

--------------------------------

### SVG QR Code with Styling

Source: https://github.com/bunlong/next-qrcode/blob/master/_autodocs/integration-guide.md

Render a QR code as an SVG, which is ideal for CSS styling, responsive designs, and embedding in documents. This example shows custom margin, width, and color options.

```typescript
const { SVG } = useQRCode();
return (
  <SVG
    text={url}
    options={{
      margin: 2,
      width: 200,
      color: { dark: '#333333FF', light: '#FFFFFFFF' },
    }}
  />
);
```

--------------------------------

### Minimal QR Code Configuration

Source: https://github.com/bunlong/next-qrcode/blob/master/_autodocs/INDEX.md

The simplest way to configure a QR code, only requiring the text content.

```typescript
{ text: "..." }
```

--------------------------------

### SVG QR Code with Transparent Background

Source: https://github.com/bunlong/next-qrcode/blob/master/_autodocs/api-reference/SVG-Component.md

Illustrates how to create an SVG QR code with a transparent background by setting the `light` color to transparent white.

```typescript
import { useQRCode } from 'next-qrcode';

export function TransparentSVGQRCode() {
  const { SVG } = useQRCode();

  return (
    <SVG
      text="https://example.com"
      options={{
        errorCorrectionLevel: 'M',
        margin: 2,
        width: 200,
        color: {
          dark: '#000000FF',
          light: '#FFFFFF00',  // Transparent white
        },
      }}
    />
  );
}
```

--------------------------------

### Basic Image Component Usage

Source: https://github.com/bunlong/next-qrcode/blob/master/README.md

Use this snippet to render a QR code with default settings. The 'text' prop is mandatory for the content to be encoded.

```javascript
import React from 'react';
import { useQRCode } from 'next-qrcode';

function App() {
  const { Image } = useQRCode();

  return (
    <Image
      text={'https://github.com/bunlong/next-qrcode'}
      options={{
        type: 'image/jpeg',
        quality: 0.3,
        errorCorrectionLevel: 'M',
        margin: 3,
        scale: 4,
        width: 200,
        color: {
          dark: '#010599FF',
          light: '#FFBF60FF',
        },
      }}
    />
  );
}

export default App;
```

--------------------------------

### Branded QRCode with Logo Configuration

Source: https://github.com/bunlong/next-qrcode/blob/master/_autodocs/configuration.md

Configure a branded QR code with specific colors and a logo. Ensure logo options like width are set appropriately. If x and y are undefined, the logo will be auto-centered.

```typescript
const options: QRCodeOptions = {
  errorCorrectionLevel: 'H',
  margin: 4,
  width: 250,
  color: {
    dark: '#010599FF',
    light: '#FFBF60FF',
  },
};

const logo: Logo = {
  src: '/brand-logo.png',
  options: {
    width: 50,
    // x and y undefined = auto-center
  },
};
```

--------------------------------

### Virtualization for Many QR Codes

Source: https://github.com/bunlong/next-qrcode/blob/master/_autodocs/integration-guide.md

To mitigate performance issues when rendering a large number of QR codes, implement virtualization techniques like using 'react-window'. This ensures only visible QR codes are rendered.

```typescript
import { FixedSizeList as List } from 'react-window';
// Render only visible QR codes
```

--------------------------------

### Handling Logo Loading Errors in Next-QRcode

Source: https://github.com/bunlong/next-qrcode/blob/master/_autodocs/errors.md

This snippet demonstrates how to use the `useQRCode` hook to render a QR code with a logo. It includes a basic state to indicate if the logo failed to load, allowing for a fallback UI.

```typescript
import { useQRCode } from 'next-qrcode';

export function QRCodeWithLogo() {
  const { Canvas } = useQRCode();
  const [logoLoaded, setLogoLoaded] = React.useState(true);

  return (
    <>
      <Canvas
        text={'https://example.com'}
        options={{ width: 200 }}
        logo={{
          src: '/logo.png',
          options: { width: 40 },
        }}
      />
      {!logoLoaded && <p>Logo failed to load (QR code rendered without logo)</p>}
    </>
  );
}
```

--------------------------------

### Basic SVG QR Code Usage

Source: https://github.com/bunlong/next-qrcode/blob/master/_autodocs/api-reference/SVG-Component.md

Demonstrates the basic usage of the SVG component to render a QR code for a given text with default options.

```typescript
import { useQRCode } from 'next-qrcode';

export function BasicSVGQRCode() {
  const { SVG } = useQRCode();

  return (
    <SVG
      text="https://example.com"
      options={{
        errorCorrectionLevel: 'M',
        margin: 2,
        width: 200,
      }}
    />
  );
}
```

--------------------------------

### SVG Usage

Source: https://github.com/bunlong/next-qrcode/blob/master/_autodocs/api-reference/useQRCode.md

Demonstrates how to use the SVG component factory to render a QR code as inline SVG.

```APIDOC
## SVG Component

### Description
Renders a QR code as inline SVG markup.

### Usage
```typescript
import React from 'react';
import { useQRCode } from 'next-qrcode';

export default function SVGQRCode() {
  const { SVG } = useQRCode();

  return (
    <SVG
      text={'https://example.com'}
      options={{
        margin: 2,
        width: 200,
        color: {
          dark: '#000000FF',
          light: '#FFFFFFFF',
        },
      }}
    />
  );
}
```

### Props
- `text` (string): The data to encode in the QR code.
- `options` (object): Configuration options for the QR code generation.
  - `margin` (number): Margin around the QR code.
  - `width` (number): Desired width of the QR code.
  - `color` (object): Color configuration.
    - `dark` (string): Color of the dark modules.
    - `light` (string): Color of the light modules.
```

--------------------------------

### PNG Image Options

Source: https://github.com/bunlong/next-qrcode/blob/master/_autodocs/api-reference/Image-Component.md

Configure options for generating QR codes in PNG format, supporting transparency and lossless compression. Default format.

```typescript
options={{
  type: 'image/png',
  errorCorrectionLevel: 'M',
  margin: 4,
  scale: 4,
}}
```

--------------------------------

### Canvas with Logo Overlay

Source: https://github.com/bunlong/next-qrcode/blob/master/_autodocs/api-reference/useQRCode.md

Shows how to render a QR code with a logo overlay using the Canvas component.

```APIDOC
## Canvas Component with Logo

### Description
Renders a QR code on a canvas with an optional logo overlay.

### Usage
```typescript
import React from 'react';
import { useQRCode } from 'next-qrcode';

export default function QRCodeWithLogo() {
  const { Canvas } = useQRCode();

  return (
    <Canvas
      text={'https://example.com'}
      options={{
        errorCorrectionLevel: 'H',
        margin: 4,
        scale: 4,
        width: 200,
      }}
      logo={{
        src: '/logo.png',
        options: {
          width: 50,
          x: undefined,
          y: undefined,
        },
      }}
    />
  );
}
```

### Props
- `text` (string): The data to encode in the QR code.
- `options` (object): Configuration options for the QR code generation (see Basic Canvas Usage).
- `logo` (object): Configuration for the logo overlay.
  - `src` (string): Path to the logo image.
  - `options` (object): Options for the logo placement and size.
    - `width` (number): Width of the logo.
    - `x` (number | undefined): X-coordinate of the logo's top-left corner.
    - `y` (number | undefined): Y-coordinate of the logo's top-left corner.
```

--------------------------------

### WebP Image Options

Source: https://github.com/bunlong/next-qrcode/blob/master/_autodocs/api-reference/Image-Component.md

Configure options for generating QR codes in WebP format, offering modern compression with configurable quality. Smaller file size than JPEG.

```typescript
options={{
  type: 'image/webp',
  quality: 0.9,
  errorCorrectionLevel: 'M',
  margin: 4,
  scale: 4,
}}
```

--------------------------------

### React QRCode with Dynamic Text Input

Source: https://github.com/bunlong/next-qrcode/blob/master/_autodocs/REFERENCE.md

Shows how to create a QR code that updates dynamically based on user input. It uses the `useState` hook to manage the input value and re-renders the QR code when the input changes. Requires `react`.

```typescript
import { useState } from 'react';
import { useQRCode } from 'next-qrcode';

export function DynamicQRCode() {
  const { Canvas } = useQRCode();
  const [url, setUrl] = useState('https://example.com');

  return (
    <>
      <input
        value={url}
        onChange={(e) => setUrl(e.target.value)}
      />
      <Canvas text={url} options={{ width: 200 }} />
    </>
  );
}
```

--------------------------------

### Memoize QR Code Options with useMemo

Source: https://github.com/bunlong/next-qrcode/blob/master/_autodocs/integration-guide.md

Memoize component options to prevent unnecessary re-renders when using the QRCode component. This is useful when options are derived or passed down.

```typescript
import { useMemo } from 'react';
import { useQRCode } from 'next-qrcode';

export function OptimizedQRCode({ text, options }: { text: string; options?: any }) {
  const { Canvas } = useQRCode();

  // Memoize options to prevent unnecessary regeneration
  const memoizedOptions = useMemo(() => ({
    errorCorrectionLevel: 'M',
    margin: 2,
    width: 200,
    ...options,
  }), [options]);

  return <Canvas text={text} options={memoizedOptions} />;
}
```

--------------------------------

### Canvas QR Code Options Configuration

Source: https://github.com/bunlong/next-qrcode/blob/master/_autodocs/api-reference/Canvas-Component.md

Shows how to configure QR code appearance and generation parameters for the Canvas component, including error correction, margin, scale, and colors.

```typescript
options={{
  errorCorrectionLevel: 'M',     // Low, Medium, Quartile, High
  margin: 3,                      // Quiet zone width
  scale: 4,                       // Pixels per module
  width: 200,                     // Fixed output width (overrides scale)
  color: {{
    dark: '#010599FF',            // RGBA hex for QR modules
    light: '#FFBF60FF',           // RGBA hex for background
  }},
}}
```

--------------------------------

### Multiple QR Code Instances

Source: https://github.com/bunlong/next-qrcode/blob/master/_autodocs/api-reference/useQRCode.md

Demonstrates rendering multiple QR codes of different formats (Canvas, SVG, Image) within a single component. This is useful for displaying various QR code representations simultaneously.

```typescript
import React from 'react';
import { useQRCode } from 'next-qrcode';

export default function MultipleQRCodes() {
  const { Canvas, SVG, Image } = useQRCode();
  const text = 'https://example.com';

  return (
    <div>
      <div>
        <h2>Canvas Format</h2>
        <Canvas text={text} options={{ width: 150 }} />
      </div>
      <div>
        <h2>SVG Format</h2>
        <SVG text={text} options={{ width: 150 }} />
      </div>
      <div>
        <h2>Image Format</h2>
        <Image text={text} options={{ width: 150, type: 'image/png' }} />
      </div>
    </div>
  );
}
```

--------------------------------

### Type Definitions

Source: https://github.com/bunlong/next-qrcode/blob/master/_autodocs/COMPLETION-REPORT.md

Documentation for the various TypeScript types used within the Next-QRCode library.

```APIDOC
## Type Definitions

### `Colors`
Represents color values, typically used for foreground and background.
- **`foreground`** (string) - The color of the QR code modules.
- **`background`** (string) - The color of the QR code background.

### `QRCodeOptions`
Configuration options for generating a QR code.
- **`value`** (string) - The data to encode.
- **`size`** (number) - The desired size in pixels.
- **`level`** ('L' | 'M' | 'Q' | 'H') - Error correction level.
- **`background`** (string) - Background color.
- **`foreground`** (string) - Foreground color.
- **`logo`** (`LogoOptions` | null) - Logo configuration.
- **`ecLevel`** ('L' | 'M' | 'Q' | 'H') - Alias for `level`.

### `LogoOptions`
Configuration options for embedding a logo.
- **`src`** (string) - URL or data URI of the logo.
- **`size`** (number) - Size of the logo relative to QR code size.
- **`padding`** (number) - Padding around the logo.
- **`rounded`** (boolean) - Whether to round logo corners.

### `Logo`
Represents a logo object, typically derived from `LogoOptions`.
- **`src`** (string) - The source of the logo.
- **`size`** (number) - The calculated size of the logo.
- **`padding`** (number) - The padding around the logo.
- **`rounded`** (boolean) - Indicates if the logo has rounded corners.

### `IQRCode`
Interface for the QR code data structure.
- **`value`** (string) - The encoded data.
- **`size`** (number) - The dimensions of the QR code.
- **`level`** ('L' | 'M' | 'Q' | 'H') - The error correction level.
- **`background`** (string) - The background color.
- **`foreground`** (string) - The foreground color.
- **`logo`** (`Logo` | null) - The embedded logo information.
```

--------------------------------

### useQRCode Hook

Source: https://github.com/bunlong/next-qrcode/blob/master/_autodocs/api-reference/useQRCode.md

The primary hook exported by next-qrcode. It returns memoized component factories for rendering QR codes.

```APIDOC
## useQRCode()

### Description
Provides three component factories (Canvas, SVG, Image) for rendering QR codes with customizable options.

### Returns
An object containing memoized React component factories:
- `Image`: Renders QR code as an HTML `<img>` element.
- `Canvas`: Renders QR code on an HTML `<canvas>` element, supporting logo overlays.
- `SVG`: Renders QR code as inline SVG markup.
```

--------------------------------

### Generate WiFi Configuration QR Codes

Source: https://github.com/bunlong/next-qrcode/blob/master/_autodocs/integration-guide.md

Create a QR code for WiFi network configuration, including SSID, password, and security type. The code formats these details into the standard WiFi string format.

```typescript
import { useQRCode } from 'next-qrcode';

interface WiFiConfig {
  ssid: string;
  password: string;
  security: 'WPA' | 'WEP' | 'nopass';
}

export function WiFiQRCode({ config }: { config: WiFiConfig }) {
  const { Canvas } = useQRCode();

  // WiFi string format: WIFI:T:WPA;S:SSID;P:PASSWORD;;
  const wifiString = `WIFI:T:${config.security};S:${config.ssid};P:${config.password};;`;

  return <Canvas text={wifiString} options={{ width: 200 }} />;
}
```

--------------------------------

### QR Code Generation to Canvas

Source: https://github.com/bunlong/next-qrcode/blob/master/_autodocs/api-reference/Canvas-Component.md

This snippet demonstrates the core QR code generation process using the qrcode library's `toCanvas` method. It takes a canvas element reference, the text to encode, and options as input. An error callback is provided to handle generation failures.

```typescript
QRCode.toCanvas(
  inputRef.current,
  text,
  options,
  function (error: Error) {
    if (error) throw error;
  }
);
```

--------------------------------

### QR Code with Download Functionality

Source: https://github.com/bunlong/next-qrcode/blob/master/_autodocs/integration-guide.md

Generates a QR code and provides a button to download it as a PNG image. It uses a ref to access the canvas element and its data URL for saving.

```typescript
import { useRef } from 'react';
import { useQRCode } from 'next-qrcode';

export function DownloadableQRCode({ text, filename = 'qrcode' }: { text: string; filename?: string }) {
  const { Canvas } = useQRCode();
  const canvasRef = useRef<HTMLCanvasElement>(null);

  const handleDownload = () => {
    if (canvasRef.current) {
      const link = document.createElement('a');
      link.href = canvasRef.current.toDataURL('image/png');
      link.download = `${filename}.png`;
      link.click();
    }
  };

  return (
    <div>
      <div style={{ display: 'inline-block' }}>
        {/* Canvas component doesn't expose ref directly, so use wrapper */}
        <Canvas text={text} options={{ width: 200 }} />
      </div>
      <button onClick={handleDownload}>Download QR Code</button>
    </div>
  );
}
```

--------------------------------

### Image QR Code with Format Options

Source: https://github.com/bunlong/next-qrcode/blob/master/_autodocs/integration-guide.md

Generate a QR code as an image, supporting different formats like JPEG and PNG with quality options. This is useful for server-side rendering or simple embedding.

```typescript
const { Image } = useQRCode();
return (
  <Image
    text={url}
    options={{
      type: 'image/jpeg',
      quality: 0.92,
      width: 200,
    }}
  />
);
```