Neolithic Psychedelic Mushrooms
    Have ideas to improve npm?Join in the discussion! »

    react-resizable
    DefinitelyTyped icon, indicating that this package has TypeScript declarations provided by the separate @types/react-resizable package

    1.11.1 • Public • Published

    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 TestLayout and ResizableBox for more details.

    Make sure you use the associated styles in /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 for more on this.

    Installation

    Using npm:

    $ npm install --save react-resizable
    

    Usage

    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>. Unknown props that are not in the list below will be passed to the child component.

    {
      children: React.Element<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: ReactElement<any> | (resizeHandle: 's' | 'w' | 'e' | 'n' | 'sw' | 'nw' | 'se' | 'ne') => ReactElement<any>,
      // 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,
      resizeHandles?: ?Array<'s' | 'w' | 'e' | 'n' | 'sw' | 'nw' | 'se' | 'ne'> = ['se']
    };

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

    {
      style?: Object
    }

    If a width or height is passed to <ResizableBox>'s style prop, it will be ignored as it is required for internal function.

    Install

    npm i react-resizable

    DownloadsWeekly Downloads

    236,649

    Version

    1.11.1

    License

    MIT

    Unpacked Size

    747 kB

    Total Files

    65

    Last publish

    Collaborators

    • avatar