@100mslive/roomkit-react/src/Video/UseVideo.mdx


## useVideo

For each peer, we’ll render a `<video>` element and a `<div>` element with their name.
To render the video, we need to call attachVideo method of hmsActions, which accepts a trackId and a DOM element.
But we have abstracted this implementation inside useVideo hook for ease. This hook will return an object `videoRef` given a video `trackId`. The returned `videoRef` can be used to set on a video element meant to display the video. The hook will take care of attaching and detaching video, and will automatically detach when the video goes out of view to save on bandwidth.

import { Story } from '@storybook/addon-docs';

```jsx
import { useVideo } from ‘@100mslive/react-sdk’;
function Peer({ peer }) {
  const { videoRef } = useVideo({
    trackId: peer.videoTrack,
  });
  return <video ref={videoRef} autoPlay muted playsInline />;
}
export default Peer;
```

> Note that `height` and `width` CSS properties need to be set on the `<video>` element to render the peer's video.

<Story id="rendering-video-video-component--video-example" />