react-resizable

> 编程语言

Open source

A simple React component that is resizable with a handle.

2.6K stars0 likes1 views

Website GitHub

About

A simple React component that is resizable with a handle.

React-Resizable

View the Demo

A simple widget that can be resized via one or more handles.

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

See the example and associated code in ExampleLayout and ResizableBox for more details.

Installation
TypeScript
Compatibility
Usage
- Resizable
- ResizableBox
Props
Extracting Styles
Custom Resize Handles

Installation

bash

$ npm install --save react-resizable

Extracting Styles

You must include the associated styles in your application, otherwise the resize handles will not be visible and will not work properly.

javascript

// In your JS/TS entry point:
import 'react-resizable/css/styles.css';

Or import it in your CSS:

css

@import 'react-resizable/css/styles.css';

If you're using a bundler that doesn't support CSS imports, you can find the styles at node_modules/react-resizable/css/styles.css and include them manually.

TypeScript

As of 4.0.0, the library is authored in TypeScript and ships bundled type declarations in build/*.d.ts. You do not need to install @types/react-resizable; if you previously installed it, remove it so the bundled types take precedence:

bash

npm uninstall @types/react-resizable
# or
yarn remove @types/react-resizable

Public types are re-exported from the package root:

typescript

import {
  Resizable,
  ResizableBox,
  // types
  type ResizeCallbackData,
  type ResizeHandleAxis,
  type Axis,
  type Props as ResizableProps,
} from 'react-resizable';

Flow

Flow is no longer supported as of 4.0.0. Earlier versions shipped *.js.flow sidecar files generated from the Flow-annotated source; those have been removed.

If you still need Flow types, you can vendor the last Flow-annotated source locally from the 3.2.0 tag. They will not be updated to reflect changes landing after 4.0.0. The official recommendation is to migrate to TypeScript.

Compatibility

Version	React Version	Types
4.x	`>= 16.3`	TypeScript (bundled)
3.x	`>= 16.3`	Flow (`*.js.flow`)
2.x	Skipped	—
1.x	`14 - 17`	Flow

Usage

This package has two major exports:

<Resizable>: A raw component that does not have state. Use as a building block for larger components, by listening to its callbacks and setting its props.
<ResizableBox>: A simple `
```
</Resizable>
```
); } }


### `<ResizableBox>`

```js
import { ResizableBox } from 'react-resizable';
import 'react-resizable/css/styles.css';

class Example extends React.Component {
  render() {
    return (
      <ResizableBox
        width={200}
        height={200}
        draggableOpts={{grid: [25, 25]}}
        minConstraints={[100, 100]}
        maxConstraints={[300, 300]}
      >
        <span>Contents</span>
      </ResizableBox>
    );
  }
}

Props

These props apply to both <Resizable> and <ResizableBox>. Unknown props that are not in the list below will be passed to the child component.

typescript

type ResizeCallbackData = {
  node: HTMLElement;
  size: {width: number; height: number};
  handle: ResizeHandleAxis;
};

type ResizeHandleAxis = 's' | 'w' | 'e' | 'n' | 'sw' | 'nw' | 'se' | 'ne';

type ResizableProps = {
  children: React.ReactElement<any>;
  width: number;
  height: number;
  // Either a ReactElement to be used as handle, or a function
  // returning an element that is fed the handle's location as its first argument.
  handle?:
    | React.ReactElement<any>
    | ((resizeHandle: ResizeHandleAxis, ref: React.RefObject<HTMLElement>) => React.ReactElement<any>);
  // If you change this, be sure to update your css. Default: [20, 20].
  handleSize?: [number, number];
  lockAspectRatio?: boolean;                       // default: false
  axis?: 'both' | 'x' | 'y' | 'none';              // default: 'both'
  minConstraints?: [number, number];               // default: [20, 20]
  maxConstraints?: [number, number];               // default: [Infinity, Infinity]
  onResizeStop?:  (e: React.SyntheticEvent, data: ResizeCallbackData) => any;
  onResizeStart?: (e: React.SyntheticEvent, data: ResizeCallbackData) => any;
  onResize?:      (e: React.SyntheticEvent, data: ResizeCallbackData) => any;
  // Forwarded to react-draggable's <DraggableCore>.
  draggableOpts?: Partial<React.ComponentProps<typeof import('react-draggable').DraggableCore>>;
  resizeHandles?: ResizeHandleAxis[];              // default: ['se']
  // If `transform: scale(n)` is set on the parent, this should be set to `n`.
  transformScale?: number;                         // default: 1
};

The following props can also be used on <ResizableBox>:

typescript

{
  style?: React.CSSProperties; // styles the returned <div />
}

…

js
<Resizable handle={<div className="foo" />} />

Custom React Component

You must forward the ref and props to the underlying DOM element.

Class Components

javascript

class MyHandleComponent extends React.Component {
  render() {
    const {handleAxis, innerRef, ...props} = this.props;
    return <div ref={innerRef} className={`foo handle-${handleAxis}`} {...props} />
  }
}
const MyHandle = React.forwardRef((props, ref) => <MyHandleComponent innerRef={ref} {...props} />);

<Resizable handle={<MyHandle />} />

Functional Components

javascript

const MyHandle = React.forwardRef((props, ref) => {
  const {handleAxis, ...restProps} = props;
  return <div ref={ref} className={`foo handle-${handleAxis}`} {...restProps} />;
});

<Resizable handle={<MyHandle />} />

Custom Function

You can define a function as a handle, which will simply receive an axis (see above ResizeHandleAxis type) and ref. This may be more clear to read, depending on your coding style.

javascript

const MyHandle = (props) => {
  return <div ref={props.innerRef} className="foo" {...props} />;
};

<Resizable handle={(handleAxis, ref) => <MyHandle innerRef={ref} className={`foo handle-${handleAxis}`} />} />