Spring physics resize component for React
npm install reszSpring-based resizing for React.
Try it live →


``bash`
npm install resz
`jsx
import { Resize, Handle } from 'resz'
Your content
`
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.
Three presets, carefully tuned:
- gentle — Soft, gracefulsmooth
- — Balanced, defaultsnappy
- — Quick, responsive
`jsx`
Or tune your own physics:
`jsx`
tension: 170,
friction: 26,
mass: 1
}}
/>
Keep things in check:
`jsx`
min: { width: 200 },
max: { width: 800 },
aspectRatio: 16/9
}}
/>
Use ours or bring your own:
`jsx
// Any direction
// Your own style
render={({ active, dragging }) => (
"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 }}
/>
)}
/>
``
- 60fps performance
- 3.5kb gzipped
- Fully typed
- No runtime dependencies
---