Introduction
zriz is an image cropper for React with a straighten dial, like the crop tool in iOS Photos.
0.0
What it does
| Feature | What you get |
|---|---|
| Straighten | A dial turns the photo up to 45° each way and glides on after a flick. The photo zooms in by the least amount that keeps every corner of the crop filled |
| Move and zoom | Drag, pinch, trackpad and wheel. Pull past an edge and the photo stretches, then springs back when you let go |
| Rotate and flip | Animated quarter turns and mirroring, and a reset that undoes every change |
| Aspect ratio | Free, the photo's own ratio or any ratio you name, with a portrait and landscape swap |
| Circle crop | A round mask for avatars, exported as a PNG with transparent corners |
| Export | A file made off the main thread, or a plan your server uses to cut the original with sharp |
| Accessibility | Keys on every control, labels and announcements in your own words, and shorter motion when the system asks |
| Styling | An optional stylesheet, CSS variables, a data attribute for every state, dark mode and Tailwind |
| Plain data | The crop is a small object you can save, restore, undo or send |
| Without React | The same core binds to plain elements, so it runs in any framework |
Build it from parts
Import the parts as one namespace from @zriz/react/cropper, and the hooks from @zriz/react. These pages call the parts by their short names, such as Root.
Each part renders one outer element, which takes your props, className and ref. Image, Mask and Area go inside Viewport. The dial, zoom and buttons can sit anywhere inside Root, so your layout decides where they go:
<Cropper.Root src={photo} onValueCommit={save}>
<Cropper.Viewport style={{ maxWidth: 400, height: 300 }}>
<Cropper.Image />
<Cropper.Mask />
<Cropper.Area aria-label="Crop area" />
</Cropper.Viewport>
<Cropper.DialValue />
<Cropper.Dial aria-label="Straighten">
<Cropper.DialTicks />
</Cropper.Dial>
</Cropper.Root>onValueCommit hands you the crop each time a change ends.
The demo above runs this code. It adds handles, a grid, rotate, flip and reset, shows the angle to one decimal and uses the styles from the zriz site.