Something went wrong. Try again.
headless React image cropper
Something went wrong. Try again.
123456789101112131415161718192021222324252627282930313233343536373839import type { ComponentPropsWithoutRef, Ref } from 'react';
import { useCropperState } from './context.ts';
export interface CropperWindowProps extends ComponentPropsWithoutRef<'div'> { ref?: Ref<HTMLDivElement>;}
/** * fixed crop window. * * @param props div props. * @returns the crop window element. * @throws when rendered outside a `<Cropper.Root>`. */export const Window = (props: CropperWindowProps) => { const { children, style, ...rest } = props; const cropWindow = useCropperState((state) => state.cropWindow);
return ( <div {...rest} data-cropper-window="" // oxlint-disable-next-line react-perf/jsx-no-new-object-as-prop style={{ position: 'absolute', left: `${cropWindow.x}px`, top: `${cropWindow.y}px`, width: `${cropWindow.width}px`, height: `${cropWindow.height}px`, pointerEvents: 'none', ...style, }} > {children} </div> );};