Resizable

BsResizable wraps any content in a box with draggable edges and corners. Each glyph is also a focusable separator: the arrow keys move its edge by 10px, Shift by 1px. Inline positioning grows the box by giving back margin, so the content around it stays put; positioning="absolute" writes its own size and offset inside a positioned ancestor. labels translates the glyphs' names.

import { BsResizable } from '@mintplayer/react-bootstrap/resizable';<BsResizable>  <div className="p-2 h-100">Drag any edge, or focus it and use the arrow keys.</div></BsResizable>

<div className="position-relative stage">  <BsResizable positioning="absolute" presetPosition={{ left: 16, top: 16, width: 320, height: 160 }}>    <div className="p-2 h-100">…</div>  </BsResizable></div>