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

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

# useAudioInputs

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

## Return Value

```ts
{
  // A list of the user's available audio input devices
  devices: [{
    deviceId: string;
    label: string;
  }],

  // The currently selected audio input device
  selectedDevice: AudioInputDevice | undefined,
}

```

## Importing

```javascript
import { useAudioInputs } 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,
  useAudioInputs,
} from 'amazon-chime-sdk-component-library-react';

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

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

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

## Props

<ArgTypes of={useAudioInputs} />