react-create-html-video

!component-preview-compressed
!npm
!downloads
!license

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.

$3

``console
npm install react-create-html-video
`

$3

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

$3

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

$3

`javascript
"peerDependencies": {
"react": ">=18",
"react-dom": ">=18"
}
`

$3

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

$3

`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;
`

$3

`
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.

$3

Contributions, suggestions, and improvements are welcome.

Feel free to open issues or pull requests.

$3

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