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.

📦 Installation

npm install react-create-html-video

Note: If you are having trouble in some environments like Next.js, try to install with

npm install --save react-create-html-video@1.2.0

🎲 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 <video> 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

export type TReactCreateHTMLVideo = {
  mp4: string;
  webm: string;
};

🤝 Peer Dependencies

"peerDependencies": {
  "react": ">=17",
  "react-dom": ">=17"
}

🧪 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

/* 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 */}
    <div className="heroSection positionRelative">
      <ReactCreateHTMLVideo
        mp4="/path/to/mp4/video.mp4"
        webm="/path/to/webm/video.webm"
      />
    </div>
  )
}

/* 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 |
-----------|---------|----------|---------|---------|-------------------

📘 Contributing

Contributions, suggestions, and improvements are welcome.
Feel free to open issues or pull requests.

❤️ Support

Like this project? Support it with a github star, it would mean a lot to me! Cheers and Happy Coding.