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

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

# ContentShare

The `ContentShare` component renders a `ContentTile` for the active content share video, remote or local.

If used within the `VideoGrid` component, it will automatically place the active tile in the featured grid slot. It takes precedence over the featured video tile.

Once a meeting session has been started, a user can start and stop content sharing by using the `useContentShareControls` hook.

## Importing

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

## Usage

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

const App = () => {
  const { toggleContentShare } = useContentShareControls();

  return (
    <MeetingProvider>
      <ContentShare nameplate='Content share' />
      <button onClick={toggleContentShare}>Toggle content share</button>
    </MeetingProvider>
  );
};
```

## Props

<ArgTypes of={ContentShare} />