react-fixed-device

A custom device-shaped component that will play video file

• Simple usage
• Currently React TypeScript only

Installation

npm i react-fixed-device
# or
yarn add react-fixed-device

Usage

// import component
import Device from "react-fixed-device"

// put Device component on top of window
export const App() {
    return (
        <>
          <Device src="your.mp4" autoPlay control {...otherPorps} />
          <YourComponents/>
        </>
    )
}

API

Property	type	Description	Default	Example
src	string	(Required) Path to mp4 file	-	"./video.mp4"
type	"default" "notch" "glass"	Type of device	"default"	"glass"
mode	"portrait" "landscape"	Portrait mode or Landscape mode	"portrait"	"landscape"
poster	string	Poster image	-	"./poster.png"
loop	boolean	Determine if video is on repeat	false	true
autoPlay	boolean	Auto play or not	false	true
control	boolean	Determine if user can stop/play it	false	true
color	string	Color of device frame	"#fff"	"#ababab"
size	"sm" "md" "lg"	Size of device	"md"	"sm"
position	"bottomRight" "bottomLeft" "center"	Default position of device	"bottomRight"	"center"
draggable	boolean	Determine if device is draggable	false	true
onVideoEnd	()=> void	Invoked when video stopped	-	-

• if you set type "glass", color prop will not be honored.
• if you set loop true, onVideEnd will not be performed.

Development notes

cd node_modules/react-dom && yarn link
cd ../react-dom/ && yarn link

cd ../../example && yarn link react && yarn react-dom

License

MIT