Maofeng
51 lines
1.4 KiB
Plaintext
51 lines
1.4 KiB
Plaintext
---
|
|
title: Basic usage
|
|
description: Add the stylesheet source and create an interactive image cropper.
|
|
order: 10
|
|
toc:
|
|
- id: stylesheet
|
|
title: Stylesheet
|
|
- id: cropper
|
|
title: Cropper
|
|
- id: controls
|
|
title: External controls
|
|
---
|
|
|
|
## Stylesheet {#stylesheet}
|
|
|
|
Add the package source to the application's Tailwind stylesheet:
|
|
|
|
```css
|
|
@import "@workspace/cropper/globals.css";
|
|
```
|
|
|
|
## Cropper {#cropper}
|
|
|
|
Use classes or pass `width` and `height` directly. `aspectRatio` accepts a number or a `"width:height"` string:
|
|
|
|
```tsx
|
|
import { Cropper, type CropArea } from "@workspace/cropper"
|
|
|
|
function ProductImageCropper({ src }: { src: string }) {
|
|
const [area, setArea] = React.useState<CropArea>()
|
|
|
|
return (
|
|
<Cropper
|
|
src={src}
|
|
alt="Product"
|
|
aspectRatio="4:3"
|
|
className="w-full max-w-xl rounded-xl"
|
|
onCropAreaChange={setArea}
|
|
/>
|
|
)
|
|
}
|
|
```
|
|
|
|
Users can drag the image, scroll to zoom, or focus the Cropper and use the arrow, `+`, `-`, `0`, and `Home` keys.
|
|
|
|
`src` can also be a `Blob` or `File` from a file picker. The component creates a temporary object URL and revokes it when the source changes or the component unmounts.
|
|
|
|
## External controls {#controls}
|
|
|
|
Control the crop with `value` and `onValueChange` to connect a Slider. For a quick reset, call `reset()` on the component ref. `minZoom` is clamped to at least `1`, ensuring that the image always covers the viewport.
|