@wyhaya/react-crop-image v0.0.6

react-crop-image

React crop image component

Example

yarn dev

Install

yarn add @wyhaya/react-crop-image

Use

Component styles use styled-components

import Crop from '@wyhaya/react-crop-image'

<Crop
    // Picture url
    src={this.state.url}
    // Selected area: x y width height
    crop={this.state.crop}
    // Additional content
    element={<div>Crop</div>}
    // Default area
    onLoad={(crop, imageWidth, imageHeight) => this.setState({
        crop
    })}
    // Change area
    onChange={(crop) => this.setState({
        crop
    })}
/>

Type

type Crop = {
    x: number
    y: number
    width: number
    height: number
}
interface Props {
    src: string
    crop: Crop
    scale?: [number, number]
    width?: number
    height?: number
    minCropWidth?: number
    minCropHeight?: number
    element?: JSX.Element
    onLoad?: (crop: Crop, imageWidth: number, imageHeight: number) => void
    onChange?: (crop: Crop) => void
    className?: string
    style?: React.CSSProperties
}