https://github.com/npm-workbench/react-create-html-video
A lightweight React component that programmatically generates and plays an HTML video element with a clean, reusable API. This library does not rely on CSS-in-JS, with styles are intentionally kept minimal. Created with Typescript support.
https://github.com/npm-workbench/react-create-html-video
github-actions html-video html-video-background mp4-video npm-provenance react-html-video typescript-support webm-video
Last synced: 27 days ago
JSON representation
A lightweight React component that programmatically generates and plays an HTML video element with a clean, reusable API. This library does not rely on CSS-in-JS, with styles are intentionally kept minimal. Created with Typescript support.
- Host: GitHub
- URL: https://github.com/npm-workbench/react-create-html-video
- Owner: NPM-Workbench
- License: mit
- Created: 2026-01-26T12:49:02.000Z (5 months ago)
- Default Branch: master
- Last Pushed: 2026-05-26T04:54:42.000Z (30 days ago)
- Last Synced: 2026-05-26T06:29:19.348Z (30 days ago)
- Topics: github-actions, html-video, html-video-background, mp4-video, npm-provenance, react-html-video, typescript-support, webm-video
- Language: TypeScript
- Homepage: https://npm-workbench.github.io/react-create-html-video/
- Size: 165 MB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
## React Create HTML Video
A lightweight React component that programmatically generates and plays an HTML `` element with a clean, reusable API. This library does not rely on CSS-in-JS, with styles are intentionally kept minimal. Created with Typescript support.
### 📦 Installation
```console
npm install react-create-html-video
```
### 🎲 Features
1. Built for modern React with support for Typescript
2. A lightweight API surface that is easy to understand
3. Helps render a native HTML `` element on the browser
4. Provides support for MP4 and Webm based Video displays
5. No manual CSS import is required — styles are bundled with the package.
### 📄 API Type Signature
```javascript
export type TReactCreateHTMLVideo = {
mp4: string;
webm: string;
};
```
### 🤝 Peer Dependencies
```javascript
"peerDependencies": {
"react": ">=18",
"react-dom": ">=18"
}
```
### 🧪 How This Works
1. Detects browser support using `HTMLVideoElement.canPlayType`
2. Prefers MP4 if supported
3. Falls back to WebM if MP4 is unavailable
4. Disables video rendering on Internet Explorer
5. Returns `null` when no supported format is available
### 🔤 Example Usage
```javascript
/* node modules */
import { ReactCreateHTMLVideo } from "react-create-html-video";
/* module */
function UIComponent() {
return (
{/* make sure your parent container is positioned: relative, imagine here min-height of 100vh */}
)
}
/* exports */
export default UIComponent;
```
### 📗 Test Coverage
```
PASS src/video-component/test/index.test.tsx
RCHV Test Suite:
✓ renders null when videoSource is null
✓ renders video container when videoSource is provided
✓ renders video element with correct attributes
✓ sets video src to the videoSource from useVideo hook
✓ passes correct props to useVideo hook
✓ memoizes component and does not re-render with same props
✓ renders video element inside parent container
✓ updates when videoSource changes
✓ returns null when videoSource is falsy
✓ renders only one video element
```
```
-----------|---------|----------|---------|---------|-------------------
File | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s
-----------|---------|----------|---------|---------|-------------------
All files | 100 | 100 | 100 | 100 |
index.tsx | 100 | 100 | 100 | 100 |
-----------|---------|----------|---------|---------|-------------------
```
🎯 **Note:** Release(s) 1.4.x has fixed issues related to react-dedup. It was found that inspite of being a react client side component, an error related to ```Cannot read properties of undefined (reading 'ReactCurrentDispatcher')``` was coming up. You can now install this package directly. If issues still persist, please do raise a github issue along with screenshots and comments for me to work on.
### 📘 Contributing
Contributions, suggestions, and improvements are welcome.
Feel free to open issues or pull requests.
### 🔒 Security & Privacy
1. This package is open source and designed as a lightweight client-side React component. It does not collect, store, sell, or share user data, and it does not include analytics, tracking, telemetry, cookies, local storage usage, backend services, or project-owned data collection systems.
2. For more details, including vulnerability reporting guidance and consumer security recommendations, please see the [Security Policy](https://github.com/NPM-Workbench/react-create-html-video/security/policy).
### ❤️ Support
Like this project? Support it with a github star, it would mean a lot to me! Cheers and Happy Coding.