https://github.com/maximeheckel/react-livephoto
A simple component for React.JS to make it easy to embed LivePhotos in your app.
https://github.com/maximeheckel/react-livephoto
component js livephoto photo react video
Last synced: 3 months ago
JSON representation
A simple component for React.JS to make it easy to embed LivePhotos in your app.
- Host: GitHub
- URL: https://github.com/maximeheckel/react-livephoto
- Owner: MaximeHeckel
- License: mit
- Created: 2017-04-26T02:27:32.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2017-04-26T03:05:12.000Z (about 8 years ago)
- Last Synced: 2025-02-27T15:07:51.538Z (4 months ago)
- Topics: component, js, livephoto, photo, react, video
- Language: JavaScript
- Size: 931 KB
- Stars: 11
- Watchers: 4
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-livephoto - A LivePhoto component for React.JS
This is a simple component for React.JS build around [livephotokit](https://developer.apple.com/reference/livephotoskitjs) to make it easy to embed LivePhotos in your application.
## Usage
The easiest way to use react-livephoto is to install it from NPM.
```
npm install --save react-livephoto
```
At this point you can import react-livephoto in your application as follows:
```js
import LivePhoto from 'react-livephoto';
```
## Props
| Property | Type | Description |
| ------------- |:-------------:|-----|
| `width` | number | The width in px of the LivePhoto component, this prop is required for the element to render. |
| `height` | number | The height in px of the LivePhoto component, this prop is required for the element to render. |
| `imageSrc` | string | The path of your livephoto .jpg file. This is the image which will be displayed as preview. |
| `videoSrc` | string | The path of your livephoto .mov file. This is the video which will play when the `Live` label is hovered. |
## Contributing
Developing
* Running the project - **npm start** - Runs the development server at *localhost:8080* and use Hot Module Replacement. You can override the default host and port through env (`HOST`, `PORT`).
Testing
The test setup is based on Jest. Code coverage report is generated to `coverage/`. The coverage information is also uploaded to codecov.io after a successful Travis build.
* Running tests once - **npm test**
* Running tests continuously - **npm run test:watch**
* Running individual tests - **npm test -- ** - Works with `test:watch` too.
* Linting - **npm run test:lint** - Runs ESLint.
## License
*react-livephoto* is available under MIT. See LICENSE for more details.