{"library":"react-video-renderer","title":"React Video Renderer","description":"react-video-renderer is a lightweight (under 2KB), dependency-free React component designed to simplify the creation of custom video players. Utilizing a render-props pattern, it offers a declarative API for managing HTML5 video state and actions, abstracting away direct DOM interactions. The library's current stable version is 2.5.1. Its core philosophy emphasizes a clear separation of concerns, providing video logic and state updates without imposing UI, allowing developers full control over the player's appearance. Key differentiators include its 'no side effects out of the box' approach, a robust set of video state properties (e.g., currentTime, volume, status, isLoading), and control actions (e.g., play, pause, navigate, setVolume), alongside built-in cross-browser compatibility and support for HTML5 text tracks.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install react-video-renderer"],"cli":null},"imports":["import Video from 'react-video-renderer';","import type { VideoState } from 'react-video-renderer';","import type { VideoActions } from 'react-video-renderer';"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import Video from 'react-video-renderer';\n\nconst MyCustomVideoPlayer = ({ src }) => (\n  <Video src={src}>\n    {(video, state, actions) => (\n      <div style={{ maxWidth: '640px', margin: '20px auto', border: '1px solid #ccc' }}>\n        {video}\n        <div style={{ padding: '10px', background: '#f0f0f0' }}>\n          <p>Time: {Math.floor(state.currentTime)}s / {Math.floor(state.duration)}s</p>\n          <p>Volume: {Math.round(state.volume * 100)}% {state.isMuted ? '(Muted)' : ''}</p>\n          <p>Status: {state.status} {state.isLoading ? '(Loading...)' : ''}</p>\n          <input\n            type=\"range\"\n            value={state.currentTime}\n            max={state.duration || 0}\n            onChange={e => actions.navigate(parseFloat(e.target.value))}\n            style={{ width: '100%', marginBottom: '10px' }}\n          />\n          <input\n            type=\"range\"\n            value={state.volume}\n            max={1}\n            step={0.01}\n            onChange={e => actions.setVolume(parseFloat(e.target.value))}\n            style={{ width: '100%', marginBottom: '10px' }}\n          />\n          <button onClick={actions.play} disabled={state.status === 'playing'} style={{ marginRight: '5px' }}>Play</button>\n          <button onClick={actions.pause} disabled={state.status === 'paused'} style={{ marginRight: '5px' }}>Pause</button>\n          <button onClick={actions.toggleMute} style={{ marginRight: '5px' }}>{state.isMuted ? 'Unmute' : 'Mute'}</button>\n          <button onClick={actions.requestFullscreen}>Fullscreen</button>\n        </div>\n        {state.status === 'errored' && <p style={{ color: 'red', padding: '10px' }}>Error loading video!</p>}\n      </div>\n    )}\n  </Video>\n);\n\nexport default MyCustomVideoPlayer;\n","lang":"typescript","description":"This quickstart demonstrates how to integrate `react-video-renderer` to build a custom video player UI. It shows accessing video state (time, volume, status), controlling playback with actions (play, pause, navigate, mute), and rendering a basic progress bar and volume slider using HTML input elements. It also includes basic error and loading state display.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}