Nutritious Pumpkin Masses

    react-sizer

    1.0.8 • Public • Published

    react-sizer

    Simple React HOC to get the size of a component

    installation

    npm install react-sizer
    

    example

    import React, { Component } from 'react';
    import PropTypes from 'prop-types';
    import sizer from 'react-sizer';
    
    class MyComponent extends Component {
      static propTypes = {
        width: PropTypes.number.isRequired,
        height: PropTypes.number.isRequired
      };
    
      constructor(props) {
        super(props);
      }
    
      render() {
        const { width, height } = this.props;
    
        return (
          <div style={{width, height, background: '#f00'}}>
            Hello World
          </div>
        );
      }
    }
    
    const MySizedComponent = sizer()(MyComponent);
    
    

    options

    The sizer HOC can be passed several options.

    const options = {
      getSize: domElement => ({width: domElement.clientWidth, height: domElement.clientHeight}),
      widthProp: 'nameOfPropForInjectedWidth',
      heightProp: 'nameOfPropForInjectedHeight',
      getDisplayName: name => `NameOfComponentToShowInReactDevTools(${name})`,
      updateSizeCallback: () => { /* code to be run after the size has changed */ },
      resizeProps: [ 'one or more prop names', 'that will trigger recomputation of the size when their value changes']
    };
    
    class MyComponent extends Component {
      static propTypes = {
        nameOfPropForInjectedWidth: PropTypes.number.isRequired,
        nameOfPropForInjectedHeight: PropTypes.number.isRequired
      };
      
      // ...
    }
    
    sizer(options)(MyComponent);
    

    Install

    npm i react-sizer

    DownloadsWeekly Downloads

    19

    Version

    1.0.8

    License

    MIT

    Unpacked Size

    30.4 kB

    Total Files

    10

    Last publish

    Collaborators

    • jharris4