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

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

# SDK Hooks

React hooks that provide functionality or state related to your Amazon Chime meeting. These hooks are aimed at making it easy to build out your own meeting UI.

## Getting Started

Refer to the [primary introduction page](/docs/introduction--page) on how to get your app setup with a `MeetingProvider`, and for how to join a meeting.

Once you have your `MeetingProvider` rendered and you've joined a meeting, you can use these hooks to build out your meeting UIs.

## Examples

### Building a custom mute button

```jsx
import { useToggleLocalMute } from 'amazon-chime-sdk-component-library-react';

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

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

### Building a custom ContentShare component

```jsx
import {
  useAudioVideo,
  useContentShareState
} from 'amazon-chime-sdk-component-library-react';

const ContentShare () => => {
  const audioVideo = useAudioVideo();
  const { tileId } = useContentShareState();
  const videoEl = useRef<HTMLVideoElement | null>(null);

  useEffect(() => {
    if (!audioVideo) {
      return;
    }

    audioVideo.bindVideoElement(tileId, videoEl.current);

    return () => audioVideo.unbindVideoElement(tileId);
  }, [audioVideo, tileId]);

  return (
    <video ref={videoEl} className="my-content-tile" />
  );
}
```

### Building a Roster

_Note_ - You will need to have provided `meetingManager.getAttendee` with a function to fetch your attendee names, otherwise there will be no names in the roster. See the [MeetingManager documentation](/docs/sdk-providers-meetingmanager--page) for more information.

```jsx
import { useRosterState, useAttendeeStatus } from 'amazon-chime-sdk-component-library-react';

const MyMeetingRoster = () => {
  const { roster } = useRosterState();
  const attendees = Object.values(roster);

  const attendeeItems = attendees.map((attendee) => {
    const { id, name } = attendee;
    return <MyRosterCell key={id} attendeeId={id} name={name} />;
  });

  return (
    <div className="my-roster">
      { attendeeItems }
    </div>
  )
}

const MyRosterCell = ({ name, attendeeId }) => {
  const { videoEnabled, sharingContent, muted } = useAttendeeStatus(attendeeId);

  return (
    <div>
      <div>{ name }</div>
      {muted ? <MyIcon> : <MyDisabledIcon />}
      {sharingContent ? <MyIcon> : <MyDisabledIcon />}
      {videoEnabled ? <MyIcon> : <MyDisabledIcon />}
    </div>
  );
}
```

### Building a grid for remote attendee videos

```jsx
import {
  useRemoteVideoTileState,
  RemoteVideo,
} from 'amazon-chime-sdk-component-library-react';

const MyVideoGrid = () => {
  const { tiles } = useRemoteVideoTileState();
  const videos = tiles.map((tileId) => <RemoteVideo tileId={tileId} />);

  return (
    <div className={`grid grid--size-${tiles.length}`}>
      {tiles.length ? videos : 'No remote videos available'}
    </div>
  );
};
```