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

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

# RemoteVideo

The `RemoteVideo` component renders a `VideoTile` and connects the video to the associated tileId.

**Note** - The binding occurs any time the passed tileId changes. If you are working with a list of tiles, make sure to give each item a [key](https://reactjs.org/docs/lists-and-keys.html) of the tileId to avoid binding the video unecessarily.

## Importing

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

## Usage

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

const App = () => (
  <MeetingProvider>
    <MyCustomGrid>
      <RemoteVideo tileId={2} />
    </MyCustomGrid>
  </MeetingProvider>
);
```

## Props

<ArgTypes of={RemoteVideo} />