import { Meta, ArgTypes } from '@storybook/blocks';
import { useVideoInputs } from '../';

<Meta title="SDK Hooks/useVideoInputs" />

# useVideoInputs

The `useVideoInputs` hook returns a list of the user's available video input devices and the currently selected video input device.

## Return Value

```ts
{
  devices: [{
    deviceId: string;
    label: string;
  }],

  // The current selected video input device
  selectedDevice: VideoInputDevice | undefined;
}

```

## Importing

```javascript
import { useVideoInputs } from 'amazon-chime-sdk-component-library-react';
```

## Usage

The hook depends on the `DevicesProvider`. If you are using `MeetingProvider`, it is rendered by default.

```jsx
import React from 'react';
import {
  MeetingProvider,
  useVideoInputs,
} from 'amazon-chime-sdk-component-library-react';

const App = () => (
  <MeetingProvider>
    <MyChild />
  </MeetingProvider>
);

const MyChild = () => {
  const { devices, selectedDevice } = useVideoInputs();
  const items = devices.map((device) => (
    <li key={device.deviceId}>{device.label}</li>
  ));

  return (
    <div>
      <p>
        Current Selected Video Input Device: {JSON.stringify(selectedDevice)}
      </p>
      <p>Devices</p>
      <ul>{items}</ul>
    </div>
  );
};
```

## Props

<ArgTypes of={useVideoInputs} />