# Qr

Renders a value as a QR code.

[View source and API](https://github.com/tempoxyz/ds/blob/main/src/web/components/Qr.tsx)

## Overview

Qr renders a value as a QR code drawn in the foreground color on a transparent ground.

Show the encoded value as text with a copy action beside the code, since many people cannot scan.

## Examples

### Basic

```tsx
import { Qr } from '@tempoxyz/ds'

export function Demo() {
  return <Qr value="tempo:0xd8dA6BF26964aF9D7eEd9e03E53415D37aA96045" />
}
```

[View example source](https://github.com/tempoxyz/ds/blob/main/docs/src/examples/demos/Qr/Basic.tsx)

### Size

Set `size` to `small`, `medium`, or `large`. It defaults to `medium`.

```tsx
import { Qr, style } from '@tempoxyz/ds'

export function Demo() {
  return (
    <div {...styles.row()}>
      {(['small', 'medium', 'large'] as const).map((size) => (
        <Qr key={size} size={size} value="tempo:0xd8dA6BF26964aF9D7eEd9e03E53415D37aA96045" />
      ))}
    </div>
  )
}

namespace styles {
  export const row = style({ alignItems: 'start', display: 'flex', flexWrap: 'wrap', gap: '4' })
}
```

[View example source](https://github.com/tempoxyz/ds/blob/main/docs/src/examples/demos/Qr/Size.tsx)

### Arena

Pass an image URL to `arena` to draw a logo in the center.

```tsx
import { Qr } from '@tempoxyz/ds'
import pathUsd from '../../coins/PathUSD.svg'

export function Demo() {
  return <Qr arena={pathUsd} value="https://example.org" />
}
```

[View example source](https://github.com/tempoxyz/ds/blob/main/docs/src/examples/demos/Qr/Arena.tsx)

## Guidelines

TODO: Write guidelines for Qr.