1.0.1 • Published 3 years ago
react-video-cropper v1.0.1
react-video-cropper
react video cropper which crop images from videos
Install
npm install --save react-video-cropperUsage
1. Basic usage
import VideoCropper from 'react-video-cropper'
import React, { useState } from 'react'
import video from './data/1.mp4'
const App = () => {
const [imgList, setImgList] = useState([])
return (
<>
<VideoCropper
videoSrc={video}
ButtonSize='20px'
onCheckButton={(i) => {
setImgList((prev) => [...prev, i])
}}
/>
{imgList.map((image) => (
<img src={image} />
))}
</>
)
}
export default AppProps
| Name | Description | Default |
|---|---|---|
| videoSrc | video source to play video | undefined |
| height | Height of compenent | video height |
| width | Width of component | video width |
| className | css class name | undefined |
| cropAspect | Aspect ratio for crop selection | undefined |
| onCheckButton | call back function triger on check button with cropped image as parameter | undefined |
| onCloseButton | call back function trigger on close button | undefined |
| CloseButtonIcon | icon/text to show on close button (jsx element) | cross icon |
| CheckButtonIcon | icon/text to show on check button (jsx element) | check icon |
| CloseButtonColor | close button icon/font color | #3da4ed |
| CheckButtonColor | check button icon/font color | #3da4ed |
| CloseButtonBackgroundColor | clode button background color | white |
| CheckButtonBackGroundColor | check button background color | white |
| ButtonSize | size of close and check button | 20px |
License
MIT © srjchauhan