### Install React QR Code with Package Managers

Source: https://reactqrcode.com/installation

Install the @lglab/react-qr-code package using your preferred package manager. Supported managers include pnpm, npm, yarn, and bun.

```shell
pnpm add @lglab/react-qr-code
```

```shell
npm i @lglab/react-qr-code
```

```shell
yarn add @lglab/react-qr-code
```

```shell
bun add @lglab/react-qr-code
```

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

### Basic QR Code Generation in React

Source: https://reactqrcode.com/examples/basic

Demonstrates the fundamental usage of the @lglab/react-qr-code library to render a QR code. This requires React and the library itself. The output is a QR code component within the React application.

```javascript
import React from 'react';
import QRCode from '@lglab/react-qr-code';

function App() {
  return (
    <div>
      <h1>My QR Code</h1>
      <QRCode value="https://example.com" />
    </div>
  );
}

export default App;
```

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

### Generate QR Code with ReactQRCode

Source: https://reactqrcode.com/quick-start

This snippet demonstrates the basic usage of the ReactQRCode component to generate a QR code. It requires the '@lglab/react-qr-code' library to be installed. The component takes a 'value' prop, which is the data to be encoded in the QR code.

```tsx
import { ReactQRCode } from '@lglab/react-qr-code'

export const Demo = () => {
  return (
    <ReactQRCode value='https://reactqrcode.com' />
  );
}
```

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

### Set Solid Color Background in React QR Code

Source: https://reactqrcode.com/examples/background

This snippet demonstrates how to set a solid color as the background for a QR code using the @lglab/react-qr-code library. Ensure you have the library installed as a dependency.

```jsx
import React from 'react';
import QRCode from '@lglab/react-qr-code';

function App() {
  return (
    <QRCode
      value="https://example.com"
      bgColor="#FFFFFF" // Sets the background to white
    />
  );
}
```

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

### ReactQRCodeRef - Download Functionality

Source: https://reactqrcode.com/ref-api

This section details how to use the `download` method exposed via a ref on the ReactQRCode component to save the QR code in different formats and sizes.

```APIDOC
## ReactQRCodeRef
The ReactQRCode component supports React refs. Developers can use ref to access the underlying SVG and trigger actions such as downloading the QR code in different formats.

### Props

#### `svg`
- **Type**: `SVGSVGElement`
- **Description**: The SVG element of the QR code.

#### `download`
- **Type**: `(options: DownloadOptions) => void`
- **Description**: Method to download the QR code in different formats.

### `DownloadOptions` Interface

#### `name`
- **Type**: `string`
- **Description**: The name of the file to download.
- **Default**: `qr-code`
- **Required**: No

#### `format`
- **Type**: `DownloadFileFormat`
- **Description**: The format of the file to download.
- **Default**: `svg`
- **Required**: No
- **Possible Values**: `svg`, `png`, `jpeg`

#### `size`
- **Type**: `number`
- **Description**: The size of the QR Code to download.
- **Default**: `500`
- **Required**: No

### Request Example

```javascript
// Assuming you have a ref attached to your ReactQRCode component
const qrCodeRef = useRef(null);

const handleDownload = () => {
  qrCodeRef.current.download({
    name: 'my-qr-code',
    format: 'png',
    size: 600
  });
};
```

### Response

This method does not return a value, but initiates a file download.
```

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

### Basic QR Code Generation with React

Source: https://reactqrcode.com/llms-full

Demonstrates the basic usage of the ReactQRCode component to generate a QR code for a given URL. It requires importing the component and passing the value prop.

```tsx
import { ReactQRCode } from '@lglab/react-qr-code';

<ReactQRCode value="https://reactqrcode.com" />
```

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

### Data Modules Settings API Reference

Source: https://reactqrcode.com/examples/data-modules

Provides information on how to customize the data modules (small squares) in a QR code, including shape, color, and random sizing options.

```APIDOC
## Data Modules Settings

### Description
Customization options for the data modules (the small squares) within a QR code. This allows for adjustments to shape, color, and the rendering of random sizes for specific shapes.

### Method
Not applicable (This is a configuration object/reference, not an endpoint).

### Endpoint
Not applicable

### Parameters
Refer to the `DataModulesSettings` API reference for detailed parameter information.

### Request Example
```json
{
  "dataModulesSettings": {
    "dataModuleShape": "square",
    "dataModuleColor": "#000000",
    "randomSize": true
  }
}
```

### Response
#### Success Response (N/A)
This section is not applicable as it refers to configuration rather than a request/response cycle.

#### Response Example
Not applicable.
```

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

### FinderPatternOuterSettings API

Source: https://reactqrcode.com/finder-pattern-outer-settings

This section details the properties available for customizing the outer appearance of the QR Code's finder patterns.

```APIDOC
## FinderPatternOuterSettings

### Description
These are the properties you can use to customize the outer part of the QR Code finder patterns (the big squares).

### Method
N/A (Configuration Object)

### Endpoint
N/A

### Parameters
#### Properties
- **color** (string) - Optional - The color of the finder patterns outer part. Default: `#000000`
- **style** (FinderPatternOuterStyle) - Optional - The style of the finder patterns outer part. Default: `square`. Possible Values: `square`, `pinched-square`, `rounded-sm`, `rounded`, `rounded-lg`, `circle`, `inpoint-sm`, `inpoint`, `inpoint-lg`, `outpoint-sm`, `outpoint`, `outpoint-lg`, `leaf-sm`, `leaf`, `leaf-lg`
```

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

### GradientSettings API

Source: https://reactqrcode.com/gradient-settings

Allows customization of the gradient for QR code data or background.

```APIDOC
## GradientSettings API

### Description
These are the properties you can use to customize the gradient for the QR code data or background.

### Properties

#### type
- **type**: string
- **Description**: The type of gradient.
- **Default**: N/A
- **Required**: Yes
- **Possible Values**: linearradial

#### stops
- **type**: GradientSettingsStop[]
- **Description**: The gradient stops.
- **Default**: N/A
- **Required**: Yes
- **Possible Values**: N/A

#### rotation
- **type**: number
- **Description**: The gradient rotation.
- **Default**: 0
- **Required**: No
- **Possible Values**: 0 - 360
```

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

### GradientSettingsStop API

Source: https://reactqrcode.com/gradient-settings

Defines the properties for a single gradient stop.

```APIDOC
## GradientSettingsStop API

### Description
Defines the properties for a single gradient stop.

### Properties

#### offset
- **type**: string
- **Description**: The gradient stop offset. It should be a percentage including the % sign e.g. 0%, 50%, 100%.
- **Default**: N/A
- **Required**: Yes
- **Possible Values**: N/A

#### color
- **type**: string
- **Description**: The gradient stop color.
- **Default**: N/A
- **Required**: Yes
- **Possible Values**: N/A
```

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

### ReactQRCode Component Props

Source: https://reactqrcode.com/react-qr-code-props

This section details the available props for the ReactQRCode component, allowing for extensive customization of QR code generation.

```APIDOC
## ReactQRCode Component Props

### Description
This component allows for the generation of customizable QR codes within React applications. Below are the available props for configuring the QR code's appearance and data.

### Method
N/A (Component Props)

### Endpoint
N/A (Component Props)

### Parameters
#### Props
- **value** (string | string[]) - Required - The value to encode into the QR Code.
- **size** (number) - Optional - QR Code size in pixels. Default: 128.
- **marginSize** (number) - Optional - The number of modules to use for margin. Recommended: 4. Default: 4.
- **background** (string | GradientSettings) - Optional - QR Code background. Can be a hex string or a GradientSettings object. Transparent when no value is provided.
- **gradient** (GradientSettings) - Optional - Defines the gradient for the QR code background. See GradientSettings for details.
- **dataModulesSettings** (DataModulesSettings) - Optional - Customizes the appearance of the data modules. See DataModulesSettings for details.
- **finderPatternOuterSettings** (FinderPatternOuterSettings) - Optional - Customizes the outer settings of the finder patterns. See FinderPatternOuterSettings for details.
- **finderPatternInnerSettings** (FinderPatternInnerSettings) - Optional - Customizes the inner settings of the finder patterns. See FinderPatternInnerSettings for details.
- **imageSettings** (ImageSettings) - Optional - Configures an image to be embedded within the QR code. See ImageSettings for details.
- **level** (ErrorCorrectionLevel) - Optional - The Error Correction Level to use. Possible values: L, M, Q, H. Default: M.
- **minVersion** (number) - Optional - The minimum version used when encoding the QR Code. The optimal (lowest) version is determined, using minVersion as the lower bound. Default: 1.
- **boostLevel** (boolean) - Optional - If enabled, the Error Correction Level of the result may be higher than the specified Error Correction Level option if it can be done without increasing the version. Default: true.
- **ref** (React.RefObject<ReactQRCodeRef>) - Optional - A ref object to access the ReactQRCodeRef instance.
- **svgProps** (React.SVGProps<SVGSVGElement>) - Optional - Props passed directly to the underlying SVG element.

### Request Example
```jsx
<ReactQRCode
  value="https://example.com"
  size={256}
  level="H"
  background="#ffffff"
  dataModulesSettings={{
    color: "#000000"
  }}
/>
```

### Response
N/A (Component Props - Renders a QR Code SVG element)

```

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

### ImageSettings API

Source: https://reactqrcode.com/image-settings

Defines the properties for customizing the embedded image within the QR code, including its source, dimensions, positioning, and appearance.

```APIDOC
## ImageSettings

### Description
These are the properties you can use to customize the image in the QR Code.

### Method
Not Applicable (Configuration Object)

### Endpoint
Not Applicable (Configuration Object)

### Parameters
#### Properties (within ImageSettings object)
- **src** (string) - Required - The URI of the embedded image.
- **width** (number) - Required - The width, in pixels, of the image.
- **height** (number) - Required - The height, in pixels, of the image.
- **excavate** (boolean) - Optional - Remove the modules around the embedded image. Default: `false`. Possible Values: `true`, `false`.
- **x** (number) - Optional - The horizontal offset of the embedded image, starting from the top left corner. Default: `center`.
- **y** (number) - Optional - The vertical offset of the embedded image, starting from the top left corner. Default: `center`.
- **opacity** (number) - Optional - The opacity of the embedded image in the range. Default: `1`. Possible Values: `0-1`.

### Request Example
```json
{
  "src": "/path/to/your/image.png",
  "width": 50,
  "height": 50,
  "excavate": true,
  "x": 10,
  "y": 10,
  "opacity": 0.8
}
```

### Response
#### Success Response (200)
Not Applicable (Configuration Object)

#### Response Example
Not Applicable (Configuration Object)
```

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

### Advanced QR Code Customization with React

Source: https://reactqrcode.com/llms-full

Illustrates advanced customization options for the ReactQRCode component, allowing control over size, error correction level, data module appearance, finder pattern styling, and embedding an image. This enables highly personalized QR code designs.

```tsx
<ReactQRCode
  value="https://reactqrcode.com"
  size={256}
  level="H"
  dataModulesSettings={{
    style: 'rounded',
    color: '#2563eb'
  }}
  finderPatternOuterSettings={{
    style: 'rounded-lg'
  }}
  imageSettings={{
    src: '/logo.png',
    width: 40,
    height: 40,
    excavate: true
  }}
/>
```

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

### Transparent Background in React QR Code

Source: https://reactqrcode.com/examples/background

This snippet shows how to create a QR code with a transparent background using the @lglab/react-qr-code library. Transparency is achieved by simply not providing a `bgColor` or `bgGradient` prop.

```jsx
import React from 'react';
import QRCode from '@lglab/react-qr-code';

function App() {
  return (
    <QRCode
      value="https://example.com"
      // No bgColor or bgGradient prop means transparent background
    />
  );
}
```

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

### Set Gradient Background in React QR Code

Source: https://reactqrcode.com/examples/background

This snippet illustrates how to apply a gradient as the background for a QR code using the @lglab/react-qr-code library. This requires the GradientSettings object to define the gradient's properties.

```jsx
import React from 'react';
import QRCode from '@lglab/react-qr-code';
import { GradientSettings } from '@lglab/react-qr-code';

function App() {
  const gradientSettings = new GradientSettings({
    startColor: '#000000',
    endColor: '#FFFFFF',
    linearGradient: [
      0,0,
      0,1
    ]
  });

  return (
    <QRCode
      value="https://example.com"
      bgGradient={gradientSettings}
    />
  );
}
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.