Quick Start

Install

yarn

yarn add react-true-resizable

pnpm

pnpm add react-true-resizable

npm

npm install react-true-resizable

Main Features

• Resize any DOM node.
• Does not wrap the target DOM node with other DOM elements.
• Does not rely on the target DOM node CSS positioning style(and does not change it).
• Written in modern React techniques and works great with other modern React UI frameworks like MUI.
• Handles correctly and predictably refs forwarding behaviors.
• Very Fast and efficient(most 'expensive' calculation are memorized).
• Simple API, yet can be easily customized.

in simple words - it will work as you would expect.

Why

See comparison with other Resizable solutions to learn why this lib is different.

Basic Usage

reset

Resizable

Live Edit

Live Editor

function Live () { const BoxStyle = { border: "solid", borderRadius: 12, width: 120, display: "flex", flexDirection: "column", justifyContent: "center", alignItems: "center", }; return ( <Resizable> <div style={BoxStyle}>Resizable</div> </Resizable> ); }

function Live () {
  const BoxStyle = {
    border: "solid",
    borderRadius: 12,
    width: 120,
    display: "flex",
    flexDirection: "column",
    justifyContent: "center",
    alignItems: "center",
  };
  return (
    <Resizable>
      <div style={BoxStyle}>Resizable</div>
    </Resizable>
  );
}

Result

Loading...