rpi
react-picture-in-picture
npm i react-picture-in-picture
rpi

react-picture-in-picture

React Component that allow you to easily implement the Picture-in-Picture API (https://w3c.github.io/picture-in-picture/) in your app

by Thomas.CA

1.0.0 (see all)License:MITTypeScript:Not Found
npm i react-picture-in-picture
Readme

react-picture-in-picture

React Component that allow you to easily implement the Picture-in-Picture API (https://w3c.github.io/picture-in-picture/) in your app

NPM JavaScript Style Guide

alt text

Install

npm install --save react-picture-in-picture

or

yarn add react-picture-in-picture

Usage

import React, { useState } from 'react'

import Reactpip from 'react-picture-in-picture'

const ReactpipExemple = () =>{
  const[active, setActive] = useState(false)
  render () {
    return (
      <>
        <Reactpip isActive= {active} >
          <source src="https://cdn.arnellebalane.com/videos/original-video.mp4"/>
        </Reactpip>
        <button onClick = {() => setActive(!active)}>Toggle Picture in Picture</button>
      </>
    )
  }
}
export default ReactpipExemple

Props

Here the list of all props :

NametypeDescriptionIs required ?Default value
idstringset a custom id to the video playerno'videopip'
isActivebooleanstate that allow to turn on or of the pip modenofalse
callBackSuccessOnEnablefunctionfunction that would be called if the media where successfully go to pip modeno
callBackSuccessOnDisablefunctionfunction called when the pip mode is successfully disabledno
stylestyle objectstyle that would be apply to the video elementno
classNamestringclassName that would be apply to the video elementno
autoplaybooleanenable autoplay on the video playernofalse
controlsbooleanenable or not video controlsnotrue
childrennodechildren element that can be include between the element (eg : < source > tag)no
loopbooleanenable loop play on the videonofalse
mutedbooleanmute the video player soundnofalse
classOnEnablestringcss class that would be activate on the video player when pip mode is enableno

License

MIT © Thomascogez

Downloads/wk

62

GitHub Stars

12

LAST COMMIT

1yr ago

MAINTAINERS

1

CONTRIBUTORS

3

OPEN ISSUES

0

OPEN PRs

28
VersionTagPublished
1.0.0
latest
3yrs ago
No alternatives found
No tutorials found
Add a tutorial

Rate & Review

100
No reviews found
Be the first to rate