@thanhnn/react-resizable

A modern, accessible, and customizable React component library for creating resizable elements with TypeScript.
Perfect for dashboards, editors, modals, and any dynamic layout requiring user-resizable components.

Live Demo ↗

---

Table of Contents

• ✨ Features
• 📦 Installation
• 🚀 Demo
• 🛠️ Usage
  • Basic
  • Controlled
  • Multiple Handles
  • Custom Styling
  • Aspect Ratio
  • With useResizable Hook
  • With Next.js
• 📘 API Reference
• ⌨️ Keyboard Navigation
• ♿ Accessibility
• 🌐 Browser Support
• 🧑‍💻 Development
• 🤝 Contributing
• 🪪 License

---

✨ Features

• 🧩 Composable & Flexible – Headless design lets you style freely.
• ⚙️ Fully Typed – Built with TypeScript for great DX.
• ♿ Accessible – ARIA attributes, keyboard support, and screen reader-friendly.
• 🎯 Precise Constraints – Control min/max dimensions and aspect ratio.
• 🔗 Keyboard + Mouse + Touch – Works on all input devices.
• 🔄 Controlled & Uncontrolled Modes – Choose how you manage state.

---

📦 Installation

npm install @thanhnn/react-resizable
# or
yarn add @thanhnn/react-resizable
# or
pnpm add @thanhnn/react-resizable

---

🚀 Demo

Live demo: https://thanhnn-react-resizable.vercel.app
Explore:

• Basic resizable behavior
• Custom handles and styling
• Multiple handles
• Aspect ratio locking
• Controlled/Uncontrolled usage
• useResizable hook

---

🛠️ Usage

Basic

import { Resizable } from '@thanhnn/react-resizable';

<Resizable>
  <Resizable.Content>Your content</Resizable.Content>
  <Resizable.Handle />
</Resizable>;

Controlled

const [size, setSize] = useState({ width: 300, height: 200 });

<Resizable value={size} onChange={(w, h) => setSize({ width: w, height: h })}>
  <Resizable.Content>Your content</Resizable.Content>
  <Resizable.Handle direction="bottom-right" />
</Resizable>;

Multiple Handles

<Resizable minWidth={200} minHeight={200}>
  <Resizable.Content>Your content</Resizable.Content>
  <Resizable.Handle direction="top" />
  <Resizable.Handle direction="right" />
  <Resizable.Handle direction="bottom" />
  <Resizable.Handle direction="left" />
  <Resizable.Handle direction="top-right" />
  <Resizable.Handle direction="bottom-right" />
  <Resizable.Handle direction="bottom-left" />
  <Resizable.Handle direction="top-left" />
</Resizable>

Custom Styling

<Resizable minWidth={200} minHeight={200}>
  <Resizable.Content className="bg-gray-100 rounded-lg shadow-lg p-4">
    Custom styled content
  </Resizable.Content>
  <Resizable.Handle
    direction="bottom-right"
    className="w-4 h-4 bg-blue-500 rounded-full hover:bg-blue-600"
  />
</Resizable>

Aspect Ratio

<Resizable minWidth={200} minHeight={200} aspectRatio>
  <Resizable.Content>Aspect-ratio locked</Resizable.Content>
  <Resizable.Handle direction="bottom-right" />
</Resizable>

With useResizable Hook

const { width, height, getResizeHandleProps } = useResizable({
  minWidth: 200,
  minHeight: 200,
  triggerMode: 'resize',
});

<div style={{ width, height }}>
  Custom content
  <div {...getResizeHandleProps('bottom-right')} />
</div>;

With Next.js

'use client';

import { Resizable } from '@thanhnn/react-resizable';

export default function Page() {
  return (
    <Resizable minWidth={300} minHeight={200}>
      <Resizable.Content className="p-4">Next.js ready</Resizable.Content>
      <Resizable.Handle direction="bottom-right" />
    </Resizable>
  );
}

Using asChild

Render the Resizable component as its direct child element, merging props and behavior. Useful for applying resizable functionality to existing components without extra wrappers. Requires @radix-ui/react-slot to be installed.

import { Resizable } from '@thanhnn/react-resizable';

<Resizable asChild>
  <button className="my-resizable-button">
    Resizable Button
    <Resizable.Handle />
  </button>
</Resizable>;

---

📘 API Reference

<Resizable />

Prop	Type	Default	Description
value	{ width: number; height: number }	–	Controlled size
minWidth	number	50	Minimum width (px)
minHeight	number	50	Minimum height (px)
maxWidth	number	Infinity	Maximum width (px)
maxHeight	number	Infinity	Maximum height (px)
aspectRatio	boolean	false	Lock aspect ratio
triggerMode	'resize' | 'end' | 'both'	'resize'	When to trigger onChange
onChange	(w: number, h: number) => void	–	Resize callback
asChild	boolean	false	Render as direct child

triggerMode options:

• 'resize': (Default) onChange triggered continuously during resizing
• 'end': onChange triggered only once at the end of resize
• 'both': onChange triggered during resize and again at the end

<Resizable.Content />

Prop	Type	Default	Description
asChild	boolean	false	Render as direct child

<Resizable.Handle />

Prop	Type	Default	Description
direction	'top' | 'right' | 'bottom' | 'left' | 'top-right' | 'bottom-right' | 'bottom-left' | 'top-left'	'bottom-right'	Direction of the resize handle
asChild	boolean	false	Render as direct child

All components accept div props like className, style, id, etc.

---

⌨️ Keyboard Navigation

• Enter: Start resizing
• Escape: Cancel resizing
• Shift: Hold Shift for lock aspect ratio

---

♿ Accessibility

Built with accessibility in mind:

• Proper ARIA roles
• Focusable handles
• Keyboard support
• Touch device support

---

🌐 Browser Support

• ✅ Chrome (latest)
• ✅ Firefox (latest)
• ✅ Safari (latest)
• ✅ Edge (latest)

---

🧑‍💻 Development

git clone https://github.com/nnthanh01061999/react-resizable.git
cd react-resizable
pnpm install
pnpm storybook  # Launch Storybook
pnpm build      # Build the library

---

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

• Fork the repository
• Create your feature branch (git checkout -b feature/amazing-feature)
• Commit your changes (git commit -m 'Add some amazing feature')
• Push to the branch (git push origin feature/amazing-feature)
• Open a Pull Request

🪪 License

MIT © @nnthanh01061999