react-resizeable
    TypeScript icon, indicating that this package has built-in type declarations

    0.2.6 • Public • Published

    react-resizeable

    Check out the demo.

    A react library that allows you to place custom resizeable grid components throughout your codebase.

    react-resizeable exports two components, Resizeable, the parent container and, Child, the wrapper for any children. See demo for examples.

    Features

    ⏳ Saves you time by handling all the annoying event listeners for you.

    ⭐️ Flexibility to use proper semantic HTML (both components accept an as prop!)

    🐑 Simplicity -- no need to pass multiple breakpoints, if each child has a minWidth we'll handle the wrap for you!

    Requirement

    To use react-resizeable, you must use styled-component > 4.1 as it is a peer dependency.

    Installation

    $ yarn add react-resizeable
    // or
    $ npm i react-resizeable

    Example

    NOTE: most arguments are provided defaults (see Full API below) with the only required one being width on the <Child> component, however it is strongly recommended to include minWidth as well. (see demo for additional examples).

    import React from 'react';
    import { Resizeable, Child } from 'react-resizeable';
     
    const SomeComponent = () => (
        <Resizeable height="100vh" as="main">
          <Child resize={{
            width: '50%',
            minWidth: '300px'
            resizeable: true,
            resizeDir: 'both'
          }}>
            <p>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit
            </p>
          </Child>
          <Child resize={{
            as: 'article',
            width: '50%',
            minWidth: '300px',
            height: '450px',
            minHeight: '350px'
          }}>
            <p>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit
            </p>
          </Child>
        </Resizeable>
    )
     
    export default SomeComponent;

    Full API

    <Parent />

    Props:

    interface ResizeableProps {
      flexDirection?: 'row' | 'column';
      height?: string;
      as?: keyof JSX.IntrinsicElements;
    }

    Defaults:

     {
       flexDirection: 'row',
       height: '100%',
       as: 'div',
     }

    <Child />

    Note:

    • <Child /> includes a forwardRef wrapper, so feel free to pass it a ref if need be.
    • all additional props passed to child are forwarded to the styled component so you could pass a style prop to override things if you were so inclined.

    Props:

    interface ChildProps {
      resize: {
        width: string;
        resizeDir?: 'none' | 'both' | 'horizontal' | 'vertical' | 'initial' | 'inherit';
        resizeable?: boolean;
        minWidth?: string;
        height?: string;
        minHeight?: string;
        as?: keyof JSX.IntrinsicElements;
      };
    }

    Defaults:

      resize: {
        width: 'n/a',
        resizeable: false,
        resizeDir: 'n/a',
        as: 'div',
        minWidth: 'min-content',
        height: '100%',
        minHeight: '100%',
      }

    License

    MIT Licensed

    Contributors

    This project follows the all-contributors specification. Contributions of any kind welcome!

    Install

    npm i react-resizeable

    DownloadsWeekly Downloads

    114

    Version

    0.2.6

    License

    MIT

    Unpacked Size

    84.5 kB

    Total Files

    27

    Last publish

    Collaborators

    • cdaz5