import useToggleLocalMute from '../useToggleLocalMute';

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

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

# useToggleLocalMute

The `useToggleLocalMute` hook returns the state of whether the local user is muted or not, and a function to toggle their mute state.

### Return Value

```javascript
{
  // Whether or not the local user is muted
  muted: boolean;

  // A function to toggle the local user's mute state
  toggleMute: () => void;
}
```

## Importing

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

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

const MyChild = () => {
  const { muted, toggleMute } = useToggleLocalMute();

  return (
    <button onClick={toggleMute}>{muted ? 'Unmute myself' : 'Mute'}</button>
  );
};
```

### Dependencies

- `AudioVideoProvider`