InlineCrop

The Inline Crop component displays an overlay and interaction handlers for inline cropping of an image on a design area.

The overlay stretches to fill the dimensions of its parent element, and cropping is done via the resize handles and by dragging the image.

name	type	required	comment
crop	Crop	yes	The cropping box's offset as a percent from the top, right, bottom, and left edges of the image
onMoveCrop	(value: { crop: Crop }) => void	yes
onResizeCrop	(value: CroppingValues) => void	yes
position	{ x: number; y: number }	yes	The item's position within the design area
rotation	number	yes	The item's rotation
size	{ height: number; width: number }	yes	The item's size
uncroppedUrl	string	yes	URL pointing to the uncropped version of the image
ariaLabel	string	no
className	string	no
role	AriaRole	no
style	CSSProperties	no

Result

Loading...

Live Editor

function InlineCropDemo() { const [position, setPosition] = React.useState({ x: 300, y: 100 }); const [size, setSize] = React.useState({ width: 150, height: 150 }); const [crop, setCrop] = React.useState({ top: 0, right: 0, bottom: 0, left: 0 }); const globalRotation = useGlobalRotation(); return ( <DesignLayer style={{ position: 'relative', height: 500, transform: `rotate(${globalRotation}deg)` }}> <InlineCrop uncroppedUrl="https://placebear.com/360/360" rotation={0} position={position} size={size} crop={crop} onMoveCrop={(value) => { const newCrop = value.crop; setCrop(newCrop); }} onResizeCrop={(value) => { const newCrop = value.crop; const newSize = value.size; const newPosition = value.position; setCrop(newCrop); setSize(newSize); setPosition(newPosition); }} /> </DesignLayer> ); }

function InlineCropDemo() {
    const [position, setPosition] = React.useState({ x: 300, y: 100 });
    const [size, setSize] = React.useState({ width: 150, height: 150 });
    const [crop, setCrop] = React.useState({ top: 0, right: 0, bottom: 0, left: 0 });

    const globalRotation = useGlobalRotation();

    return (
        <DesignLayer style={{ position: 'relative', height: 500, transform: `rotate(${globalRotation}deg)` }}>
            <InlineCrop
                uncroppedUrl="https://placebear.com/360/360"
                rotation={0}
                position={position}
                size={size}
                crop={crop}
                onMoveCrop={(value) => {
                    const newCrop = value.crop;
                    setCrop(newCrop);
                }}
                onResizeCrop={(value) => {
                    const newCrop = value.crop;
                    const newSize = value.size;
                    const newPosition = value.position;
                    setCrop(newCrop);
                    setSize(newSize);
                    setPosition(newPosition);
                }}
            />
        </DesignLayer>
    );
}