Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions apps/docs/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -32,13 +32,13 @@
"clsx": "^2.1.1",
"date-fns": "^4.1.0",
"eslint-config-next": "16.1.0",
"lucide-react": "^0.561.0",
"lucide-react": "^0.562.0",
"next": "16.1.0",
"next-themes": "^0.4.6",
"prism-react-renderer": "^2.4.1",
"react": "^19.2.3",
"react-dom": "^19.2.3",
"react-hook-form": "^7.68.0",
"react-hook-form": "^7.69.0",
"react-icons": "^5.5.0",
"tailwind-merge": "^3.4.0",
"tailwindcss-animate": "^1.0.7"
Expand Down
138 changes: 138 additions & 0 deletions apps/docs/public/llms-full.txt
Original file line number Diff line number Diff line change
@@ -0,0 +1,138 @@
# @lglab/react-qr-code Technical Reference

> Comprehensive technical documentation for @lglab/react-qr-code, a highly customizable React QR code generator.

This file provides all technical details including component props, types, and API references to enable LLMs to work with the library without fetching additional context.

## ReactQRCode Component

The main component exported by the library.

### Props (ReactQRCodeProps)

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `value` | `string \| string[]` | - | **Required.** The value to encode. Use an array for multi-segment optimization. |
| `size` | `number` | `128` | The size in pixels of the rendered QR code. |
| `level` | `'L' \| 'M' \| 'Q' \| 'H'` | `'L'` | Error Correction Level. |
| `marginSize` | `number` | `0` | Number of modules to use for the margin. |
| `minVersion` | `number` | `1` | Minimum version (1-40) for the QR code. |
| `boostLevel` | `boolean` | `true` | Boosts ECL if version remains the same. |
| `background` | `BackgroundSettings` | `'#FFFFFF'` | Background color (hex) or `GradientSettings`. |
| `gradient` | `GradientSettings` | - | Gradient applied to data modules and finder patterns. |
| `dataModulesSettings` | `DataModulesSettings` | - | Configuration for data modules styling. |
| `finderPatternOuterSettings` | `FinderPatternOuterSettings` | - | Configuration for outer finder patterns. |
| `finderPatternInnerSettings` | `FinderPatternInnerSettings` | - | Configuration for inner finder patterns. |
| `imageSettings` | `ImageSettings` | - | Settings for an embedded logo or image. |
| `svgProps` | `React.SVGProps<SVGSVGElement>` | - | Additional props passed to the root SVG element. |

---

## Sub-Settings Interfaces

### DataModulesSettings

| Property | Type | Default | Description |
| --- | --- | --- | --- |
| `color` | `string` | - | Color of the data modules (overridden by `gradient`). |
| `style` | `DataModulesStyle` | `'square'` | Shape of the data modules. |
| `randomSize` | `boolean` | `false` | If true, modules will have slightly varied sizes. |

**Available Styles (`DataModulesStyle`):**
`'square'`, `'square-sm'`, `'pinched-square'`, `'rounded'`, `'leaf'`, `'vertical-line'`, `'horizontal-line'`, `'circle'`, `'diamond'`, `'star'`, `'heart'`, `'hashtag'`

### FinderPatternOuterSettings

| Property | Type | Default | Description |
| --- | --- | --- | --- |
| `color` | `string` | - | Color of the outer pattern (overridden by `gradient`). |
| `style` | `FinderPatternOuterStyle` | `'square'` | Shape of the outer finder pattern. |

**Available Styles (`FinderPatternOuterStyle`):**
`'square'`, `'pinched-square'`, `'rounded-sm'`, `'rounded'`, `'rounded-lg'`, `'circle'`, `'inpoint-sm'`, `'inpoint'`, `'inpoint-lg'`, `'outpoint-sm'`, `'outpoint'`, `'outpoint-lg'`, `'leaf-sm'`, `'leaf'`, `'leaf-lg'`

### FinderPatternInnerSettings

| Property | Type | Default | Description |
| --- | --- | --- | --- |
| `color` | `string` | - | Color of the inner pattern (overridden by `gradient`). |
| `style` | `FinderPatternInnerStyle` | `'square'` | Shape of the inner finder pattern. |

**Available Styles (`FinderPatternInnerStyle`):**
Includes all `FinderPatternOuterStyle` plus: `'diamond'`, `'star'`, `'heart'`, `'hashtag'`

### ImageSettings

| Property | Type | Default | Description |
| --- | --- | --- | --- |
| `src` | `string` | - | **Required.** URL/Source of the image. |
| `height` | `number` | - | **Required.** Height in pixels. |
| `width` | `number` | - | **Required.** Width in pixels. |
| `excavate` | `boolean` | `false` | Remove modules behind the image. |
| `x` | `number` | - | Horizontal offset (centered by default). |
| `y` | `number` | - | Vertical offset (centered by default). |
| `opacity` | `number` | `1` | Image opacity (0-1). |
| `crossOrigin` | `CrossOrigin` | - | CORS setting for the image. |

### GradientSettings

| Property | Type | Default | Description |
| --- | --- | --- | --- |
| `type` | `'linear' \| 'radial'` | - | **Required.** Type of gradient. |
| `stops` | `GradientSettingsStop[]` | - | **Required.** Array of `{ offset: string, color: string }`. |
| `rotation` | `number` | `0` | Rotation in degrees (for linear gradients). |

---

## Imperative API (Ref)

The component exposes the following via `forwardRef`:

### ReactQRCodeRef

| Method / Property | Type | Description |
| --- | --- | --- |
| `svg` | `SVGSVGElement \| null` | Reference to the underlying SVG element. |
| `download` | `(options: DownloadOptions) => void` | Triggers a download of the QR code. |

### DownloadOptions

| Property | Type | Default | Description |
| --- | --- | --- | --- |
| `name` | `string` | `'qr-code'` | Filename without extension. |
| `format` | `'svg' \| 'png' \| 'jpeg'` | `'svg'` | Target file format. |
| `size` | `number` | `500` | Target size in pixels for the export. |

---

## Examples

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

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

### Advanced Customization
```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
}}
/>
```

26 changes: 26 additions & 0 deletions apps/docs/public/llms.txt
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
# reactqrcode.com

> Official documentation and demo for @lglab/react-qr-code, a highly customizable React QR code generator.

This site serves as the central hub for the `@lglab/react-qr-code` library, providing installation guides, API references, and an interactive demo for generating custom QR codes.

## Documentation Pages

- [Introduction](https://reactqrcode.com/)
- [Installation](https://reactqrcode.com/installation)
- [Quick Start](https://reactqrcode.com/quick-start)
- [Interactive Demo](https://reactqrcode.com/demo)
- [ReactQRCode Props](https://reactqrcode.com/react-qr-code-props)
- [Ref API](https://reactqrcode.com/ref-api)
- [Data Modules Settings](https://reactqrcode.com/data-modules-settings)
- [Finder Pattern Inner Settings](https://reactqrcode.com/finder-pattern-inner-settings)
- [Finder Pattern Outer Settings](https://reactqrcode.com/finder-pattern-outer-settings)
- [Gradient Settings](https://reactqrcode.com/gradient-settings)
- [Image Settings](https://reactqrcode.com/image-settings)
- [Examples](https://reactqrcode.com/examples)

## External Links

- [GitHub Repository](https://github.com/LGLabGreg/react-qr-code)
- [npm Package](https://www.npmjs.com/package/@lglab/react-qr-code)

111 changes: 111 additions & 0 deletions apps/docs/src/app/llms-txt/page.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,111 @@
import { PageHeading } from '@/components/page-heading'
import {
TypographyBold,
TypographyH2,
TypographyInlineCode,
TypographyList,
TypographyP,
} from '@/components/ui/typography'

export default function Page() {
return (
<>
<PageHeading heading='llms.txt' />
<TypographyP>
We support the <TypographyBold>llms.txt</TypographyBold> standard to help AI
coding assistants better understand the{' '}
<TypographyInlineCode>@lglab/react-qr-code</TypographyInlineCode> library, its
API, and various customization options.
</TypographyP>

<TypographyH2>What is llms.txt?</TypographyH2>
<TypographyP>
The <TypographyBold>llms.txt</TypographyBold> file is a proposal to standardize
the provision of information to Large Language Models (LLMs) at inference time. It
provides a curated, LLM-friendly overview of a project, making it easier for AI
tools to provide accurate code suggestions and documentation.
</TypographyP>

<TypographyH2>Available Routes</TypographyH2>
<TypographyP>
We provide two distinct files to cater to different levels of detail:
</TypographyP>
<TypographyList
items={[
{
key: 'llms',
content: (
<>
<TypographyBold>
<a href='/llms.txt' target='_blank' rel='noreferrer'>
/llms.txt
</a>
</TypographyBold>{' '}
- A structured overview of the project with links to all documentation
pages.
</>
),
},
{
key: 'llms-full',
content: (
<>
<TypographyBold>
<a href='/llms-full.txt' target='_blank' rel='noreferrer'>
/llms-full.txt
</a>
</TypographyBold>{' '}
- A comprehensive technical reference including all component props,
settings interfaces, and usage examples.
</>
),
},
]}
/>

<TypographyH2>Usage with Cursor</TypographyH2>
<TypographyP>
You can use these files in <TypographyBold>Cursor</TypographyBold> to enhance its
understanding of the library. For more details, see the{' '}
<a
href='https://cursor.com/docs/context/mentions#docs'
target='_blank'
rel='noreferrer'
className='text-primary underline underline-offset-4'
>
Cursor Documentation
</a>
.
</TypographyP>
<TypographyList
items={[
{
key: 'cursor-docs',
content: (
<>
Type <TypographyInlineCode>@Docs</TypographyInlineCode> in the chat or
composer and select <TypographyBold>Add new doc</TypographyBold>. Paste{' '}
<TypographyInlineCode>
https://reactqrcode.com/llms-full.txt
</TypographyInlineCode>{' '}
to give Cursor full access to the library specification.
</>
),
},
{
key: 'cursor-chat',
content: (
<>
Alternatively, you can reference the file directly in any prompt by typing{' '}
<TypographyInlineCode>
@https://reactqrcode.com/llms-full.txt
</TypographyInlineCode>{' '}
for immediate context.
</>
),
},
]}
/>
</>
)
}
Loading