repowisechintan9/plyr-react

chintan9 / plyr-react Architecture and code health

A simple, accessible and customisable react media player for Video, Audio, YouTube and Vimeo

TypeScript★ 522
Use in your agentAsk this codebase

github.com/chintan9/plyr-reactIndexed at 97bc824Up to date with upstream

What is plyr-react?

plyr-react is a responsive React media player component for playing video, audio, YouTube and Vimeo content inside React applications. It wraps the Plyr media player, so React code can render a Plyr player and access its underlying instance. The library is written in TypeScript.

Written by a model from the README and the source

37 files and 21 symbols in 5 modules, led by JavaScript (5 files) and TypeScript (4).

Start reading

Code health

9.8out of 10Excellent
Full health report

Use chintan9/plyr-react in your agent

Point Claude Code, Cursor, Codex or VS Code at this repository. Your agent gets the index this page is built from: cited answers, callers, history and health for any file.

  1. 1.In Claude, open Customize → Connectors, click +, then Add custom connector. On a Team or Enterprise plan an owner adds it first under Organization settings → Connectors.
  2. 2.Paste the server URL below as the Remote MCP server URL, then click Add.
  3. 3.Click Connect. A Repowise sign-in window opens. Approve access.
  4. 4.Repowise's tools are now available in your Claude chats.

Connect with one click. Sign in with Repowise (OAuth), no API key to copy. Works in Claude on the web, desktop, and mobile.

Docs
bash
https://api.repowise.dev/mcp/chintan9/plyr-react
Editors need an API key: sign in to create one.Sign in to connect

This repo is public, so anyone with a Repowise account and an API key can connect.

Try asking

  • get_overview()
  • get_answer("how is plyr-react put together?")
  • get_why("why is plyr-react structured this way?")

Explore plyr-react

Key features of plyr-react

  • Supports HTML5 video and audio, as well as embedded YouTube and Vimeo players.
  • Provides a simple component for quick setup and a usePlyr hook for custom integrations.
  • Gives direct access to the underlying Plyr instance through React refs, so playback, volume and fullscreen can be controlled from application code.
  • Ships TypeScript types for props, options and the player instance.
  • Can be combined with the HLS.js library for adaptive bitrate streaming.

How chintan9/plyr-react works

plyr-react is a wrapper around the Plyr media player, and Plyr performs the playback. The package entry point is src/index.tsx, and the src module holds two files that make up the library. Developers can use a simple component for quick setup or the usePlyr hook, which gives full control over the player lifecycle and custom wrappers. The package.json file declares react and plyr as peer dependencies, so the host project must install them. The example/plyr-example/src/main.jsx and example/plyr-example/src/App.jsx files form a demo React app that shows the library in use. The tests module holds one test file.

The codebase has 37 files and 21 symbols in 5 modules, led by JavaScript, TypeScript and Shell. Code health is 9.8 out of 10, rated excellent.

Getting started with plyr-react

  1. Install plyr-react with npm.
    npm install plyr-react
  2. Install the peer dependencies react, react-dom and plyr in your project.
    npm install react react-dom plyr

Commands copied from the README

chintan9/plyr-react FAQ

What is plyr-react?

plyr-react is a responsive React media player component for video, audio, YouTube and Vimeo content. It wraps the Plyr media player so React applications can embed and control it.

How does plyr-react work?

plyr-react wraps the Plyr media player for use in React. It offers a simple component for quick setup and a usePlyr hook for full control, and React refs expose the Plyr instance for programmatic playback control.

How do I install plyr-react?

Install plyr-react with npm install plyr-react, then install the peer dependencies react, react-dom and plyr. The package also works with Yarn and PNPM.

What language is plyr-react written in?

plyr-react is written in TypeScript. Its code also includes some JavaScript files, mainly in the example app.

How is the plyr-react code organized?

The library source lives in the src module, with src/index.tsx as its entry point. The example/plyr-example directory contains a demo React app, and the tests module holds one test file.

When should I use plyr-react?

Use plyr-react when you need to add video, audio, YouTube or Vimeo playback to a React application with a customizable player. It also supports HLS.js streaming through a custom integration.

What license does plyr-react use?

plyr-react is released under the MIT license. The license id is MIT.

The summary, features and answers on this page are written by a model from the README and the source, and refreshed with each index.

About this page

Get a page like this for your own codebase

Repowise built this map of chintan9/plyr-react from its source and git history. It parses every symbol, draws the dependency graph, scores each file's health from complexity, duplication, coverage and churn, finds hotspots and owners in the history, and writes documentation for every module. Your coding agent reads the same index over MCP, so its answers cite real files.

Index your repo freeSee how Repowise worksFree for 2 public repos, with a page like this one.

Prefer local? pip install repowise && repowise init indexes your own checkout, no account needed.