1.0.1 • Published 1 year ago

react-video-cropper v1.0.1

Weekly downloads
-
License
MIT
Repository
github
Last release
1 year ago

react-video-cropper

react video cropper which crop images from videos

NPM JavaScript Style Guide

Install

npm install --save react-video-cropper

Usage

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 App

Props

NameDescriptionDefault
videoSrcvideo source to play videoundefined
heightHeight of compenentvideo height
widthWidth of componentvideo width
classNamecss class nameundefined
cropAspectAspect ratio for crop selectionundefined
onCheckButtoncall back function triger on check button with cropped image as parameterundefined
onCloseButtoncall back function trigger on close buttonundefined
CloseButtonIconicon/text to show on close button (jsx element)cross icon
CheckButtonIconicon/text to show on check button (jsx element)check icon
CloseButtonColorclose button icon/font color#3da4ed
CheckButtonColorcheck button icon/font color#3da4ed
CloseButtonBackgroundColorclode button background colorwhite
CheckButtonBackGroundColorcheck button background colorwhite
ButtonSizesize of close and check button20px

License

MIT © srjchauhan