React crop image component

react-crop-image

React crop image component.

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
    option={<div>Hello</div>}
    // Default area
    onInit={(crop, imageWidth, imageHeight) => this.setState({
        crop
    })}
    // Change area
    onChange={(crop) => this.setState({
        crop
    })}
/>

interface Props {
    src: string;
    width?: number;
    height?: number;
    crop: Crop;
    option?: JSX.Element;
    onInit?: (crop: Crop, imageWidth: number, imageHeight: number) => void;
    onChange?: (crop: Crop) => void;
    className?: string;
    style?: React.CSSProperties;
}

GitHub