# or
yarn add @zag-js/qr-code @zag-js/react
```

## Anatomy

To set up the QR code correctly, you'll need to understand its anatomy and how
we name its parts.

> Each part includes a `data-part` attribute to help identify them in the DOM.



## Usage

First, import the QR code package into your project

```jsx
import * as qrCode from "@zag-js/qr-code"
```

The QR code package exports two key functions:

- `machine` â The state machine logic for the QR code widget.
- `connect` â The function that translates the machine's state to JSX attributes
  and event handlers.

Next, import the required hooks and functions for your framework and use the QR
code machine in your project ð¥

```jsx
import * as qrCode from "@zag-js/qr-code"
import { useMachine, normalizeProps } from "@zag-js/react"
import { useId } from "react"

export function QRCode() {
  const service = useMachine(qrCode.machine, {
    id: useId(),
    value: "https://github.com/chakra-ui",
  })

  const api = qrCode.connect(service, normalizeProps)

  return (
    <div {...api.getRootProps()}>
      <svg {...api.getFrameProps()}>
        <path {...api.getPatternProps()} />
      </svg>
      <div {...api.getOverlayProps()}>
        <img
          src="https://avatars.githubusercontent.com/u/54212428?s=88&v=4"
          alt=""
        />
      </div>
    </div>
  )
}
```

## Setting the QR Code value

To set the value of the QR code, pass the `value` property to the machine.

```jsx {3}
const service = useMachine(qrCode.machine, {
  // ...
  value: "https://example.com",
})
```

### Setting the correction level

Error correction allows for the QR code to be blocked or resized while still
recognizable. In some cases where the link is too long or the logo overlay
covers a significant area, the error correction level can be increased.

The QR code machine accepts the following error correction levels:

- `L`: Allows recovery of up to 7% data loss (default)
- `M`: Allows recovery of up to 15% data loss
- `Q`: Allows recovery of up to 25% data loss
- `H`: Allows recovery of up to 30% data loss

To set the error correction level, pass the `encoding.ecc` or
`encoding.boostEcc` context property.

```jsx {3}
const service = useMachine(qrCode.machine, {
  value: "...",
  encoding: { ecc: "H" },
})
```

> The alternative is to enlarge the QRCode by increasing the size of the `svg`
> element.

### Adding an overlay logo

To add a logo overlay to the QR code, render the image part. The logo will be
automatically centered within the QR code.

```jsx {3}
<div {...api.getRootProps()}>
  <svg {...api.getFrameProps()}>{/** ... */}</svg>
  <div {...api.getOverlayProps()}>
    <img src="..." alt="" />
  </div>
</div>
```

### Changing the color

To change the color of the QR code, set the `fill` attribute on the `path` part.

```css
[data-scope="qr-code"][data-part="pattern"] {
  fill: green;
}
```

To change the background color of the QR code, set the `background-color`

```css
[data-scope="qr-code"][data-part="frame"] {
  background-color: white;
}
```

### Exporting the QR code

To export the QR code as an image, you can use the `api.getDataURL` method.

```ts
api.getDataURL({ type: "image/png" }).then((url) => {
  // do something with the URL (like download it)
})
```

## Styling guide

Earlier, we mentioned that each QR code part has a `data-part` attribute added
to them to select and style them in the DOM.

```css
[data-scope="qr-code"][data-part="root"] {
  /* Styles for the root part */
}

[data-scope="qr-code"][data-part="frame"] {
  /* Styles for the svg part */
}

[data-scope="qr-code"][data-part="pattern"] {
  /* Styles for the path */
}

[data-scope="qr-code"][data-part="overlay"] {
  /* Styles for the logo */
}
```

## Methods and Properties

### Machine Context

The QR code machine exposes the following context properties:

**`value`**
Type: `string`
Description: The controlled value to encode.

**`defaultValue`**
Type: `string`
Description: The initial value to encode when rendered.
Use when you don't need to control the value of the qr code.

**`ids`**
Type: `Partial<{ root: string; frame: string; }>`
Description: The element ids.

**`encoding`**
Type: `QrCodeGenerateOptions`
Description: The qr code encoding options.

**`onValueChange`**
Type: `(details: ValueChangeDetails) => void`
Description: Callback fired when the value changes.

**`pixelSize`**
Type: `number`
Description: The pixel size of the qr code.

**`dir`**
Type: `"ltr" | "rtl"`
Description: The document's text/writing direction.

**`id`**
Type: `string`
Description: The unique identifier of the machine.

**`getRootNode`**
Type: `() => ShadowRoot | Node | Document`
Description: A root node to correctly resolve document in custom environments. E.x.: Iframes, Electron.

### Machine API

The QR code `api` exposes the following methods:

**`value`**
Type: `string`
Description: The value to encode.

**`setValue`**
Type: `(value: string) => void`
Description: Set the value to encode.

**`getDataUrl`**
Type: `(type: DataUrlType, quality?: number) => Promise<string>`
Description: Returns the data URL of the qr code.
A radio group allows users to make a single choice from a select number of
option

## Resources


[Latest version: v1.33.1](https://www.npmjs.com/package/@zag-js/radio-group)
[Logic Visualizer](https://zag-visualizer.vercel.app/radio-group)
[Source Code](https://github.com/chakra-ui/zag/tree/main/packages/machines/radio-group)



**Features**

- Syncs with `disabled` state of fieldset
- Syncs with form `reset` events
- Can programmatically set radio group value
- Can programmatically focus and blur radio items

## Installation

To use the radio machine in your project, run the following command in your
command line:

```bash
npm install @zag-js/radio-group @zag-js/react