resz

Spring-based resizing for React.
Try it live →


``bash
npm install resz
`

`jsx
import { Resize, Handle } from 'resz'







`

Why

Making spring animations for resize animations can be pretty long. Or at least that how it felt for me as a designer.
So here is something that can help you have something that feels right, quickly and with a visual configurator: https://resz.mehdib.me/

resz uses real spring physics. The same mental model you have when you pull and release something in the physical world. You can personalize it the way your interface needs to be.

Presets

Three presets, carefully tuned:

- gentle — Soft, graceful
- smooth — Balanced, default
- snappy — Quick, responsive

`jsx



`

Or tune your own physics:

`jsx
config={{
tension: 170,
friction: 26,
mass: 1
}}
/>
`

Constraints

Keep things in check:

`jsx
constraints={{
min: { width: 200 },
max: { width: 800 },
aspectRatio: 16/9
}}
/>
`




Handles

Use ours or bring your own:

`jsx
// Any direction




// Your own style
dir="se"
render={({ active, dragging }) => (
className={cn(
"w-3 h-3 rounded-full bg-white shadow-sm",
active && "scale-110",
dragging && "bg-blue-500"
)}
whileHover={{ scale: 1.2 }}
transition={{ type: "spring", stiffness: 400 }}
/>
)}
/>
``

Details

- 60fps performance
- 3.5kb gzipped
- Fully typed
- No runtime dependencies

---

Demo · GitHub · Mehdi Bouakkadia