# CameraScanner

The camera scanner uses the devices camera to scan and decode barcodes or QR codes. It displays a live feed with guidance markers for alignment and triggers actions within the app upon successful recognition.

```tsx
import React from 'react';
import {
  CameraScanner,
  Screen,
  Text,
  useScannerDataSubscription,
  reactExtension,
} from '@shopify/ui-extensions-react/point-of-sale';

const SmartGridModal = () => {
  const {data} = useScannerDataSubscription();

  return (
    <Screen
      name="CameraScanner"
      title="Camera Scanner Title"
    >
      <CameraScanner />
      <Text>{`Scanned data: ${data || ''}`}</Text>
    </Screen>
  );
};

export default reactExtension(
  'pos.home.modal.render',
  () => <SmartGridModal />,
);

```

```ts
import {
  CameraScanner,
  Screen,
  Text,
  Stack,
  extension,
} from '@shopify/ui-extensions/point-of-sale';

export default extension(
  'pos.home.modal.render',
  (root, api) => {
    const mainScreen = root.createComponent(
      Screen,
      {
        title: 'CameraScanner',
        name: 'Camera Scanner Title',
      },
    );

    const cameraScanner = root.createComponent(
      CameraScanner,
    );

    const text = root.createComponent(
      Text,
      null,
      'Scanned data: ',
    );

    mainScreen.append(cameraScanner);
    mainScreen.append(text);
    root.append(mainScreen);

    api.scanner.scannerDataSubscribable.subscribe(
      (data) => {
        text.replaceChildren(
          `Scanned data: ${data || ''}`,
        );
      },
    );
  },
);

```

## CameraScanner

### CameraScannerProps

### bannerProps

value: `CameraScannerBannerProps`

  - CameraScannerBannerProps: export interface CameraScannerBannerProps {
  /**
   * The title of the banner.
   */
  title: string;

  /**
   * The appearance of the banner.
   */
  variant: BannerVariant;
  /**
   * The visibility state of the banner.
   */
  visible: boolean;
}

### CameraScannerBannerProps

### title

value: `string`

The title of the banner.

### variant

value: `BannerVariant`

  - BannerVariant: 'confirmation' | 'alert' | 'error' | 'information'
The appearance of the banner.

### visible

value: `boolean`

The visibility state of the banner.

## Related

- [Scanner API](/api/pos-ui-extensions/apis/scanner-api#examples)