# @mux/mux-player-react

> An open source Mux player for React that Just Works™

Latest version **3.13.4** (published 2026-09-17) · MIT license · 0 weekly downloads

## Install

```sh
npm install @mux/mux-player-react
pnpm add @mux/mux-player-react
yarn add @mux/mux-player-react
bun add @mux/mux-player-react
```

## Health

**Score 70/100 (B)** — status: active.

Positive: has types; esm support; no vulnerabilities; has provenance; recently updated; high maintenance score.

Warnings: low downloads.

## Facts

| | |
|---|---|
| Version | 3.13.4 |
| Published | 2026-09-17 |
| First published | 2022-06-28 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 3 |
| Unpacked size | 238.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Provenance | attested (GitHub Actions) |
| GitHub stars | 363 |
| Author | Mux, Inc. |
| Maintainers | jsanford8, dylanjha, phil-mux, mux-npmjs |
| Keywords | video, mux, player, hls, react |

## Links

- npm: https://www.npmjs.com/package/@mux/mux-player-react
- Repository: https://github.com/muxinc/elements
- Homepage: https://mux.com/player
- Issues: https://github.com/muxinc/elements/issues
- npm.io page: https://npm.io/package/@mux/mux-player-react

## Dependencies (3)

- [prop-types](https://npm.io/package/prop-types.md) ^15.8.1
- [@mux/mux-player](https://npm.io/package/@mux/mux-player.md) 3.13.4
- [@mux/playback-core](https://npm.io/package/@mux/playback-core.md) 0.35.4

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 3.13.4 (latest) — 2026-09-17
- 3.13.4-canary.2 (canary) — 2026-09-15
- 3.13.4-canary.1 — 2026-09-15
- 3.13.4-canary.0 — 2026-09-14
- 3.13.3 — 2026-09-09
- 3.13.3-canary.2 — 2026-09-09
- 3.13.3-canary.1 — 2026-09-09
- 3.13.3-canary.0 — 2026-09-09
- 3.13.2 — 2026-07-23
- 3.13.1-canary.3 — 2026-05-08
- 3.13.1-canary.2 — 2026-05-08
- 3.13.1-canary.1 — 2026-05-08
- 3.13.1-canary.0 — 2026-05-04
- 3.13.0 — 2026-04-28
- 3.12.1-canary.0 — 2026-04-28
- … 729 more at https://npm.io/package/@mux/mux-player-react/versions

## README

<p align="center">
  <h1 align="center">&lt;MuxPlayer/&gt;</h1>
  <a href="https://npmcharts.com/compare/@mux/mux-player-react?interval=30"><img src="https://img.shields.io/npm/dm/@mux/mux-player-react.svg?sanitize=true" alt="Downloads"></a>
    <a href="https://www.npmjs.com/package/@mux/mux-player-react"><img src="https://img.shields.io/npm/v/@mux/mux-player-react.svg?sanitize=true" alt="Version"></a>
    <a href="https://www.npmjs.com/package/@mux/mux-player-react"><img src="https://img.shields.io/npm/l/@mux/mux-player-react.svg?sanitize=true" alt="License"></a>
</p>

# New release: 3.0

Mux Player recently released 3.0. The most visible change in this is new tooltips that are enabled by default, as well as [other fixes and changes](https://docs.mux.com/guides/player-releases-web#300).

## Previous version: 2.0

For changes relating to the previous major release, 2.0, see the [V1 to V2 upgrade guide](https://github.com/muxinc/elements/blob/main/packages/mux-player/UPGRADING_V1_to_V2.md) and the [blog post announcement](https://www.mux.com/blog/mux-player-2-0-for-web-and-coming-soon-for-ios-and-android).

# Introduction

`<MuxPlayer />` is a Mux-flavored React video player component, built on top of our [mux-player web component](../mux-player) and [Media Chrome](https://media-chrome.org).

# Installation

```shell
npm install @mux/mux-player-react
```

or

```shell
yarn add @mux/mux-player-react
```

# Usage

```jsx
import MuxPlayer from '@mux/mux-player-react';

<MuxPlayer
  playbackId="DS00Spx1CV902MCtPj5WknGlR102V5HFkDe"
  metadata={{
    video_id: 'video-id-123456',
    video_title: 'Bick Buck Bunny',
    viewer_user_id: 'user-id-bc-789',
  }}
/>;
```

### Lazy-loading

Defer loading of Mux Player by importing from `@mux/mux-player-react/lazy`.

```jsx
import MuxPlayer from '@mux/mux-player-react/lazy';

<MuxPlayer
  loading="viewport"
  playbackId="DS00Spx1CV902MCtPj5WknGlR102V5HFkDe"
  metadata={{
    video_id: 'video-id-123456',
    video_title: 'Bick Buck Bunny',
    viewer_user_id: 'user-id-bc-789',
  }}
/>;
```

If you are generating your pages with a Node.js server (for example, [Next.js](https://nextjs.org/docs/basic-features/data-fetching/)), consider using `@mux/mux-player-react/lazy` with [`@mux/blurup`](https://github.com/muxinc/blurup) to generate a placeholder to display during loading.

# Docs

Docs and guides live on [docs.mux.com](https://docs.mux.com/guides/video/mux-player?utm_source=github-mux-player).

API reference lives [on Github](./REFERENCE.md).

---
_Source: https://npm.io/package/@mux/mux-player-react · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._