Releases: trigger-xyz/cropperjs-react-wrapper
CropperJS 2.1.1 Compatibility
CropperJS 2.1.1 Compatibility
- New CropperViewer component - wraps with resize, selection, and themeColor props
- CropperSelection: added dynamic (replaces deprecated linked), active, x, y, width, height props
- CropperImage: added initialCenterSize prop ('contain' | 'cover')
- Updated types.d.ts with all new attributes including cropper-viewer element
- Updated dependency to cropperjs: ^2.1.1
- Exported hooks (useForwardedRef, useCustomEvents) for advanced use cases
Architecture & Refactoring
- Extracted shared hooks (src/hooks/): useForwardedRef and useCustomEvents eliminate ~15-20 lines of duplicated boilerplate per component
- useCustomEvents uses a ref-based dispatch pattern to avoid re-subscribing event listeners when handlers change
- Removed duplicate JSX types from vite-env.d.ts (was a full copy of types.d.ts)
- Added displayName to all 8 forwardRef components for React DevTools
- Consistent event handling - all components now use useLayoutEffect via the shared hook (previously CropperCanvas used useLayoutEffect while CropperSelection used useEffect)
Bug Fixes
- CropperImage: removed double-setting of src/alt/crossOrigin (was set both as JSX attributes AND in useEffect)
- CropperImage onReady: replaced hacky setTimeout with proper () API
- CropperSelection bounded: removed redundant null check
- Example flip handlers: fixed bug where (-1, scaleY) always used -1 instead of scaleX state; consolidated into single useEffect tracking both scaleX and scaleY
- Example handleResetTransformations: now also resets scaleX/scaleY state
- vite.demo.config.ts: fixed missing **dirname definition (was using bare **dirname without the fileURLToPath pattern)
- example/index.html: removed outdated CDN CSS link to cropperjs/2.0.0-beta.4 (v2 web components use Shadow DOM styles)
Testing (6 tests -> 34 tests)
- Tests for ALL 8 components (previously only CropperCanvas, CropperImage, CropperSelection)
- Ref forwarding tests for every component
- Event handler tests - verifies custom events dispatch to handlers
- Prop update/re-render tests - verifies props sync on change
- New 2.1.1 prop tests - dynamic, active, initialCenterSize, position/size props
- CropperViewer tests - full coverage for the new component
- Replaced setTimeout waits with waitFor from testing-library