react-create-html-video 1.2.3 โ†’ 1.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md CHANGED
@@ -2,15 +2,19 @@
2
2
  ![npm](https://img.shields.io/npm/v/react-create-html-video)
3
3
  ![downloads](https://img.shields.io/npm/dw/react-create-html-video)
4
4
  ![license](https://img.shields.io/npm/l/react-create-html-video)
5
+
5
6
  ## React Create HTML Video
7
+
6
8
  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.
7
9
 
8
10
  ### ๐Ÿ“ฆ Installation
11
+
9
12
  ```console
10
13
  npm install react-create-html-video
11
14
  ```
12
15
 
13
16
  ### ๐ŸŽฒ Features
17
+
14
18
  1. Built for modern React with support for Typescript
15
19
  2. A lightweight API surface that is easy to understand
16
20
  3. Helps render a native HTML `<video>` element on the browser
@@ -18,27 +22,33 @@ npm install react-create-html-video
18
22
  5. No manual CSS import is required โ€” styles are bundled with the package.
19
23
 
20
24
  ### ๐Ÿ“„ API Type Signature
25
+
21
26
  ```javascript
22
27
  export type TReactCreateHTMLVideo = {
23
28
  mp4: string;
24
29
  webm: string;
25
30
  };
26
31
  ```
32
+
27
33
  ### ๐Ÿค Peer Dependencies
34
+
28
35
  ```javascript
29
36
  "peerDependencies": {
30
37
  "react": ">=17",
31
38
  "react-dom": ">=17"
32
39
  }
33
40
  ```
41
+
34
42
  ### ๐Ÿงช How This Works
35
- 1. Detects browser support using ```HTMLVideoElement.canPlayType```
43
+
44
+ 1. Detects browser support using `HTMLVideoElement.canPlayType`
36
45
  2. Prefers MP4 if supported
37
46
  3. Falls back to WebM if MP4 is unavailable
38
47
  4. Disables video rendering on Internet Explorer
39
- 5. Returns ```null``` when no supported format is available
48
+ 5. Returns `null` when no supported format is available
40
49
 
41
50
  ### ๐Ÿ”ค Example Usage
51
+
42
52
  ```javascript
43
53
  /* node modules */
44
54
  import { ReactCreateHTMLVideo } from "react-create-html-video";
@@ -59,9 +69,38 @@ function UIComponent() {
59
69
  /* exports */
60
70
  export default UIComponent;
61
71
  ```
72
+
73
+ ### ๐Ÿ“— Test Coverage
74
+
75
+ ```
76
+ PASS src/video-component/test/index.test.tsx
77
+ RCHV Test Suite:
78
+ โœ“ renders null when videoSource is null
79
+ โœ“ renders video container when videoSource is provided
80
+ โœ“ renders video element with correct attributes
81
+ โœ“ sets video src to the videoSource from useVideo hook
82
+ โœ“ passes correct props to useVideo hook
83
+ โœ“ memoizes component and does not re-render with same props
84
+ โœ“ renders video element inside parent container
85
+ โœ“ updates when videoSource changes
86
+ โœ“ returns null when videoSource is falsy
87
+ โœ“ renders only one video element
88
+ ```
89
+
90
+ ```
91
+ -----------|---------|----------|---------|---------|-------------------
92
+ File | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s
93
+ -----------|---------|----------|---------|---------|-------------------
94
+ All files | 100 | 100 | 100 | 100 |
95
+ index.tsx | 100 | 100 | 100 | 100 |
96
+ -----------|---------|----------|---------|---------|-------------------
97
+ ```
98
+
62
99
  ### ๐Ÿ“˜ Contributing
100
+
63
101
  Contributions, suggestions, and improvements are welcome.<br/>
64
102
  Feel free to open issues or pull requests.
65
103
 
66
104
  ### โค๏ธ Support
105
+
67
106
  Like this project? Support it with a github star, it would mean a lot to me! Cheers and Happy Coding.