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

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

# useFeaturedTileState

The `useFeaturedTileState` hook provides the tile ID of the **most** active speaker, if the speaker is sharing video. If there are no active speakers, or the active speaker is not sharing video, there will be no tile ID.

### Return Value

```javascript
{
  tileId: number | null;
}
```

You can access the state with the `useFeaturedTileState` hook.

## Importing

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

## Usage

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

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

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

const MyChild = () => {
  const { tileId } = useFeaturedTileState();

  return (
    <div>{tileId ? `Tile ${tileId} is featured` : 'No featured tiles'}</div>
  );
};
```

### Dependencies

- `FeaturedVideoTileProvider`