Components

ImageCropper

Interactive image cropper that returns the selected region as an image Blob.

ImageCropper lets users drag a selection over an image and confirm a crop — ideal for avatar and cover-photo flows. Pass the src to crop and an optional aspect ratio (width / height) to lock the selection shape; leave it off for a free-form crop. On confirm, onCrop is called with the cropped region as a Blob you can upload or preview.

Example

Preview

import { ImageCropper } from '@officina/ui';

<ImageCropper
  src={objectUrl}
  aspect={1}
  cropLabel="Save crop"
  onCrop={(blob) => uploadAvatar(blob)}
/>;

API

Prop	Type	Default	Description
onCrop*	(blob: Blob) => void	—	Called with the cropped image as a `Blob` when the user confirms.
src*	string	—	Source image URL or object URL to crop.
aspect	number	—	Fixed crop aspect ratio (width / height); free-form when omitted.
cropLabel	string	Crop	Label for the confirm/crop button.

ImageLightbox

Full-screen modal gallery for viewing images with navigation between slides.

Map

Lightweight decorative map surface that plots labelled pins at relative coordinates.

ImageCropper

Example

API

On this page