> ## Documentation Index
> Fetch the complete documentation index at: https://docs.daily.co/llms.txt
> Use this file to discover all available pages before exploring further.

# Screen sharing

> Start, stop, and render screen shares in React with useScreenShare and DailyVideo.

[`useScreenShare`](/reference/daily-react/use-screen-share) covers the sending side of screen sharing: starting and stopping your own share, and observing all active shares in the call. Rendering a share reuses the same [`DailyVideo`](/reference/daily-react/daily-video) component, with the `screenVideo` track type.

## Start and stop sharing

`useScreenShare` returns `startScreenShare`, `stopScreenShare`, and `isSharingScreen` for the local participant:

```jsx theme={null}
import { useScreenShare } from '@daily-co/daily-react';

function ScreenShareButton() {
  const { isSharingScreen, startScreenShare, stopScreenShare } = useScreenShare();
  return (
    <button onClick={() => (isSharingScreen ? stopScreenShare() : startScreenShare())}>
      {isSharingScreen ? 'Stop sharing' : 'Share screen'}
    </button>
  );
}
```

`startScreenShare` triggers the browser's native screen-picker dialog. The user can cancel it, so do not assume a share started just because you called the function. React to the actual outcome with the callbacks:

```jsx theme={null}
import { useCallback } from 'react';
import { useScreenShare } from '@daily-co/daily-react';

function ScreenShare() {
  const { startScreenShare } = useScreenShare({
    onLocalScreenShareStarted: useCallback(() => console.log('Sharing started'), []),
    onLocalScreenShareStopped: useCallback(() => console.log('Sharing stopped'), []),
    onError: useCallback((e) => console.error('Screen share error', e), []),
  });
  return <button onClick={startScreenShare}>Share</button>;
}
```

## Render active screen shares

The `screens` array describes every active share in the call, local and remote. Each entry has a `session_id`, a `screen_id`, `local`, and the `video` and `audio` track states. Render each one with `DailyVideo` using `type="screenVideo"`:

```jsx theme={null}
import { useScreenShare, DailyVideo } from '@daily-co/daily-react';

function ScreenShares() {
  const { screens } = useScreenShare();
  if (screens.length === 0) return null;
  return (
    <div>
      {screens.map((screen) => (
        <DailyVideo
          key={screen.screen_id}
          sessionId={screen.session_id}
          type="screenVideo"
          fit="contain"
        />
      ))}
    </div>
  );
}
```

<Tip>
  You can also find who is sharing with [`useParticipantIds`](/reference/daily-react/use-participant-ids) and the built-in `filter: 'screen'`. Use `screens` from `useScreenShare` when you need the screen track state; use the participant filter when you just need the IDs.
</Tip>

## Screen share audio

A share can include audio (for example, sharing a browser tab with sound). Remote screen audio is played automatically by [`DailyAudio`](/reference/daily-react/daily-audio). To also play the local participant's own screen audio, set `playLocalScreenAudio`:

```jsx theme={null}
<DailyAudio playLocalScreenAudio />
```

## A complete screen-share area

```jsx theme={null}
import { useScreenShare, DailyVideo } from '@daily-co/daily-react';

function ScreenShareArea() {
  const { screens, isSharingScreen, startScreenShare, stopScreenShare } = useScreenShare();

  return (
    <div>
      <button onClick={() => (isSharingScreen ? stopScreenShare() : startScreenShare())}>
        {isSharingScreen ? 'Stop sharing' : 'Share screen'}
      </button>
      {screens.map((screen) => (
        <DailyVideo
          key={screen.screen_id}
          sessionId={screen.session_id}
          type="screenVideo"
          style={{ width: '100%', background: '#000' }}
        />
      ))}
    </div>
  );
}
```

## Next steps

<CardGroup cols={2}>
  <Card title="Rendering media" icon="video" href="/docs/daily-react/docs/rendering-media">
    More on DailyVideo and track types.
  </Card>

  <Card title="Recording" icon="circle-dot" href="/docs/daily-react/docs/recording">
    Capture the call, screen shares included.
  </Card>
</CardGroup>