# react-fixed-device

> A custom device-shaped component that will play video file

Latest version **1.0.11** (published 2022-01-13) · MIT* license · 0 weekly downloads

## Install

```sh
npm install react-fixed-device
pnpm add react-fixed-device
yarn add react-fixed-device
bun add react-fixed-device
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.11 |
| Published | 2022-01-13 |
| First published | 2022-01-07 |
| Weekly downloads | 0 |
| License | MIT* |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 51.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Maintainers | hirotake111 |

## Links

- npm: https://www.npmjs.com/package/react-fixed-device
- Repository: https://github.com/hirotake111/react-fixed-device
- npm.io page: https://npm.io/package/react-fixed-device

## Recent versions

- 1.0.11 (latest) — 2022-01-13
- 1.0.10 — 2022-01-13
- 1.0.9 — 2022-01-13
- 1.0.8 — 2022-01-13
- 1.0.6 — 2022-01-13
- 1.0.5 — 2022-01-12
- 1.0.4 — 2022-01-12
- 1.0.3 — 2022-01-11
- 1.0.2 — 2022-01-10
- 1.0.1 — 2022-01-09
- 1.0.0 — 2022-01-09
- 0.0.4 — 2022-01-09
- 0.0.3 — 2022-01-07
- 0.0.2 — 2022-01-07
- 0.0.0 — 2022-01-07

## README

# react-fixed-device

A custom device-shaped component that will play video file

- Simple usage
- Currently React TypeScript only

![demo](img/rfd_demo.gif)

### Installation

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

```

### Usage

```JavaScript
// 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

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

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

### License

MIT

---
_Source: https://npm.io/package/react-fixed-device · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._