import { Meta } from '@storybook/blocks';

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

# useLocalAudioInputActivityPreview

The `useLocalAudioInputActivityPreview` hook applies scale transformation to the HTML element passed by reference showing the microphone activity from the currently selected audio input.

You can use this hook to develop a microphone activity preview component.

## Parameters

This hook accepts two parameters:

- `elementRef` (Reference to HTML element)
- `scaleDirection` defined by `TransformScaleDirection` type, it defaults to `horizontal`

`TransformScaleDirection` type

```javascript
type TransformScaleDirection = 'horizontal' | 'vertical';
```

## Importing

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

## Usage

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

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

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

const MicrophoneActivityPreview = () => {
  const elementRef = useRef<HTMLDivElement>();
  useLocalAudioInputActivityPreview(elementRef);

  return <div ref={elementRef}></div>;
}
```

### Dependencies

- `MeetingProvider`
- `AudioVideoProvider`, If you are using `MeetingProvider`, `AudioVideoProvider` is rendered by default
- `useAudioInputs`