# MuxData

Options for the Mux Data extension that monitors playback quality

Adds the [Mux Data](https://data.mux.com) [extension](https://videojs.org/docs/framework/react/guides/architecture) to the player’s media. It renders nothing — place it inside the player as a sibling of the media element. See [Mux Data](https://videojs.org/docs/framework/react/guides/mux-data) for how monitoring works.

## Import

```bash
pnpm add @videojs/react @videojs/mux-data
```

```tsx
import { MuxData } from '@videojs/react/extensions/mux-data';
```

## Anatomy

```tsx
<MuxData />
```

## Options

| Prop | Type | Description |
| --- | --- | --- |
| `envKey` | `string` | Mux Data environment key the beacons are sent to. Optional for Mux-hosted playback |
| `metadata` | `object` | Mux Data metadata for the view |
| `playerSoftwareName` | `string` | Player name reported to Mux Data |
| `playerSoftwareVersion` | `string` | Player version reported to Mux Data. Defaults to the Video.js version |
| `playerInitTime` | `number` | Epoch milliseconds the player was initialized. Defaults to when the component was created |
| `beaconCollectionDomain` | `string` | Custom domain the beacons are sent to |
| `disableCookies` | `boolean` | Stops the SDK from setting cookies |
| `debug` | `boolean` | Turns on SDK debug logging |
| `MuxDataSdk` | `object` | SDK used for monitoring. Set it to `undefined` to switch monitoring off |

Changing `MuxDataSdk`, `beaconCollectionDomain`, `debug`, or `disableCookies` restarts monitoring, which ends the current view and starts a new one. The rest update the view in place.

## See also

- [Mux Data](https://videojs.org/docs/framework/react/guides/mux-data): How monitoring works
- [Mux video reference](https://videojs.org/docs/framework/react/reference/components/mux-video)
- [Mux audio reference](https://videojs.org/docs/framework/react/reference/components/mux-audio)

---

React documentation: https://videojs.org/docs/framework/react/llms.txt
All documentation: https://videojs.org/llms.txt