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

<Meta title="SDK Components/RosterAttendee" />

# RosterAttendee

The `RosterAttendee` component renders a [RosterCell](?path=/docs/ui-components-roster--page) for a given attendee. It will display the attendee's name along with their mute, video, and content share status.

You have to provide the `MeetingManager` with a `getAttendee` function in order to get names. See the [MeetingManager](?path=/docs/sdk-providers-meetingmanager--page) for more information.

## Importing

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

## Usage

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

const App = () => {
  return (
    <MeetingProvider>
      <RosterAttendee attendeeId="some-chime-attendee-id" />
    </MeetingProvider>
  );
};
```

## Props

<ArgTypes of={RosterAttendee} />