gem-hunter

React-Resizable

Table of Contents

Installation

$ npm install --save react-resizable

Extracting Styles

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

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

TypeScript

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

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

Flow

Compatibility

Usage

<Resizable>

import { Resizable } from 'react-resizable';
import 'react-resizable/css/styles.css';

class Example extends React.Component {
  state = {
    width: 200,
    height: 200,
  };

  onResize = (event, {node, size, handle}) => {
    this.setState({width: size.width, height: size.height});
  };

  render() {
    return (
      <Resizable
        height={this.state.height}
        width={this.state.width}
        onResize={this.onResize}
      >
        <div
          className="box"
          style={{width: this.state.width + 'px', height: this.state.height + 'px'}}
        >
          <span>Contents</span>
        </div>
      </Resizable>
    );
  }
}

<ResizableBox>

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

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
};

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

Resize Handle

Native DOM Element

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

Custom React Component

Class Components

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

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

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

Custom Function

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

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

License