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

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

# useContentShareControls

The `useContentShareControls` hook returns the state and functionality around starting, stopping, pausing, and unpausing content sharing of a local user.

### Return Value

```javascript
{
  // Whether or not the local content share is paused
  paused: boolean;

  // A function to toggle content share.
  // If the user is sharing, it will stop the content share.
  // If a user is not sharing, it will start the content share workflow.
  //
  // You can also provide a string ID to share a specific screen or a specific media stream to
  // share (e.g. a file being played to a video element).
  toggleContentShare: (source?: string | MediaStream) => Promise<void>;

  // A function to toggle the local user's content share's pause status.
  togglePauseContentShare: () => void;
}
```

## Importing

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

## Usage

The hook depends on the `ContentShareProvider`. If you are using `MeetingProvider`, it is rendered by default.

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

const App = () => (
  <MeetingProvider>
    <MyChild />
  </MeetingProvider>
);

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

  return <button onClick={toggleContentShare}>Toggle content share</button>;
};
```

## Usage With Custom Media Stream

If non-screen content (or transformed screen content) is desired to be shared, you can provide a `MediaStream` directly to the toggle function. You can use classes from `amazon-chime-
sdk-js` to help accomplish this task, see [this section in the Video Processing guide for more information](https://github.com/aws/amazon-chime-sdk-js/blob/main/guides/10_Video_Process
or.md#custom-video-processor-usage-for-content-share).

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

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

  const toggleContentShareCustom = async () => {
    const mediaStream = await navigator.mediaDevices.getDisplayMedia({
      video: true,
      audio: true,
    });
    toggleContentShare(mediaStream);
  };

  return (
    <button onClick={toggleContentShareCustom}>Toggle content share</button>
  );
};

const App = () => (
  <MeetingProvider>
    <MyChild />
  </MeetingProvider>
);
```

### Dependencies

- `ContentShareProvider`