@jswork/react-full-video v1.0.1

react-full-video

Full page background video for react.

installation

npm install -S @jswork/react-full-video

videos

• https://lofter.lf127.net/1611802866186/JWmeidangyeshenrenjingtayufangjiankuishixingchen.mp4
• https://lofter.lf127.net/1611821341381/jwhaideyanjing~1.mp4

usage

1. import css

   @import "~@jswork/react-full-video/dist/style.css";
   
   // or use sass
   @import "~@jswork/react-full-video/dist/style.scss";
   
   // customize your styles:
   $react-full-video-options: ()

2. import js

   import React from 'react';
   import ReactFullVideo from '@jswork/react-full-video';
   import '../../src/components/style.scss';
   import styled from 'styled-components';
   
   const Container = styled.div`
     padding: 0;
     margin: 0;
     height: 100%;
     .card {
       position: absolute;
       width: 400px;
       height: 220px;
       background: #fff;
       padding: 20px;
       box-shadow: rgb(0 0 0 / 16%) 0px 3px 10px;
       left: 50%;
       top: 50%;
       transform: translate(-50%, -50%);
     }
   `;
   
   export default (props: any) => {
     return (
       <Container>
         <ReactFullVideo />
         <div className="card">A nice login ui.</div>
       </Container>
     );
   };

preview

• https://afeiship.github.io/react-full-video/

license

Code released under the MIT license.