Nana Plays Minesweeper

    react-component-resizable

    2.0.1 • Public • Published

    React Resizable Component

    CircleCI

    A React component to implement cross-browser event based resize detection, without interval polling!.

    DEMO

    Usage

    var Resizable = require('react-component-resizable');
    
    <Resizable className="via transferPropsTo" onResize={this.onResize}>
      Content...
    </Resizable>

    npm install react-component-resizable --save

    Prop types

    static propTypes = {
      triggersClass: PropTypes.string,
      expandClass  : PropTypes.string,
      contractClass: PropTypes.string,
      embedCss     : PropTypes.bool,
      onResize     : PropTypes.func.isRequired
    }
     
    static defaultProps = {
      triggersClass: 'resize-triggers',
      expandClass: 'expand-trigger',
      contractClass: 'contract-trigger',
      embedCss: true
    }

    Default style

    The component will automatically embed some required style. This can be turned off using the embedCss={false} prop.

    .resize-triggers {
      visibility: hidden;
    }
     
    .resize-triggers.resize-triggers > div.contract-trigger:before {
      content: " ";
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
      overflow: hidden;
    }
     
    .resize-triggers > div {
      overflow: auto;
    }
     
    .contract-trigger:before {
      width: 200%;
      height: 200%;
    }
     

    Credits

    Many thanks to Daniel - backalleycoder.com for this blog post and scecima and his project javascript-detect-element-resize!

    Licence

    MIT

    Install

    npm i react-component-resizable

    DownloadsWeekly Downloads

    95

    Version

    2.0.1

    License

    MIT

    Unpacked Size

    48.7 kB

    Total Files

    8

    Last publish

    Collaborators

    • nrako