# react-resizable-ext

> An extension for Samuel Reed's 'react-resizable' to handle doubleClick event to reset width.

Latest version **1.7.6** (published 2017-11-09) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-resizable-ext
pnpm add react-resizable-ext
yarn add react-resizable-ext
bun add react-resizable-ext
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.7.6 |
| Published | 2017-11-09 |
| First published | 2017-10-25 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Samuel Reed |
| Maintainers | shymkovayu |
| Keywords | react, resize, resizable |

## Links

- npm: https://www.npmjs.com/package/react-resizable-ext
- Repository: https://github.com/shymkovayu/react-resizable
- Homepage: https://github.com/STRML/react-resizable
- Issues: https://github.com/STRML/react-resizable/issues
- npm.io page: https://npm.io/package/react-resizable-ext

## Dependencies (2)

- [prop-types](https://npm.io/package/prop-types.md) 15.x
- [react-draggable](https://npm.io/package/react-draggable.md) ^2.2.6 || ^3.0.3

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.7.6 (latest) — 2017-11-09
- 1.7.5 — 2017-10-25

## README

### React-Resizable

[View the Demo](https://strml.github.io/react-resizable/examples/1.html)

A simple widget that can be resized via a handle.

You can either use the `<Resizable>` element directly, or use the much simpler `<ResizableBox>` element.

See the example and associated code in [TestLayout](/test/TestLayout.js) and
[ResizableBox](/lib/ResizableBox.js) for more details.

Make sure you use the associated styles in [/css/styles.css](/css/styles.css), as without them, you will have
problems with handle placement and visibility.

You can pass options directly to the underlying `DraggableCore` instance by using the prop `draggableOpts`.
See the [demo](/test/TestLayout.js) for more on this.

### Installation

Using [npm](https://www.npmjs.com/):

    $ npm install --save react-resizable

### Usage

```js
const Resizable = require('react-resizable').Resizable; // or,
const ResizableBox = require('react-resizable').ResizableBox;

// ES6
import { Resizable, ResizableBox } from 'react-resizable';

// ...
render() {
  return (
    <ResizableBox width={200} height={200} draggableOpts={{...}}
        minConstraints={[100, 100]} maxConstraints={[300, 300]}>
      <span>Contents</span>
    </ResizableBox>
  );
}
```

### Props

These props apply to both `<Resizable>` and `<ResizableBox>`.

```js
{
  children: React.Element<any>,
  width: number,
  height: number,
  // If you change this, be sure to update your css
  handleSize: [number, number] = [10, 10],
  lockAspectRatio: boolean = false,
  axis: 'both' | 'x' | 'y' | 'none' = 'both',
  minConstraints: [number, number] = [10, 10],
  maxConstraints: [number, number] = [Infinity, Infinity],
  onResizeStop?: ?(e: SyntheticEvent, data: ResizeCallbackData) => any,
  onResizeStart?: ?(e: SyntheticEvent, data: ResizeCallbackData) => any,
  onResize?: ?(e: SyntheticEvent, data: ResizeCallbackData) => any,
  draggableOpts?: ?Object
};
```

---
_Source: https://npm.io/package/react-resizable-ext · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._