Airframe-React/app/components/FloatGrid/Grid.js

import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';

import { Container } from 'reactstrap';
import { FloatGridContext } from './floatGridContext';
import './../../styles/components/float-grid.scss';

export class Grid extends React.Component {
    static propTypes = {
        active: PropTypes.bool,
        children: PropTypes.node,
        fluid: PropTypes.bool,
        rowHeight: PropTypes.number,
        className: PropTypes.string
    }

    static defaultProps = {
        active: true,
        fluid: false,
        rowHeight: 100
    }

    state = {
        gridSize: { w: 0, h: 0 },
        gridReady: false,
    }
    _gridRef = React.createRef();
    _resizeDebounceTimeout = 0;

    componentDidMount() {
        this.setState({
            gridSize: {
                w: this._gridRef.current.clientWidth,
                h: this._gridRef.current.clientHeight
            }
        });

        if (typeof window !== 'undefined') {
            window.addEventListener('resize', this._resizeHandler);
        }
    }

    componentDidUpdate(nextProps) {
        // HACK
        if (
            typeof window !== 'undefined' &&
            nextProps.fluid !== this.props.fluid
        ) {
            window.dispatchEvent(new Event('resize'));
        }
    }

    componentWillUnmount() {
        if (typeof window !== 'undefined') {
            window.removeEventListener('resize', this._resizeHandler);
        }
    }

    render() {
        const { active, children, fluid, className, rowHeight, ...otherProps } = this.props;
        const { gridSize } = this.state;
        const modifiedChildren = React.Children.map(children, child => (
            React.cloneElement(child, {
                ...otherProps,
                active,
                gridSize
            })
        ));

        const floatWrapClasses = classNames({
            ['float-grid-parent__static']: !fluid
        }, className, 'float-grid-parent');

        return(
            <FloatGridContext.Provider
                value={{
                    gridUnitsToPx: (w, h) => {
                        return {
                            wPx: w / 12 * gridSize.w,
                            hPx: h * rowHeight
                        }
                    },
                    active,
                    gridReady: this.state.gridReady,
                    setGridReady: () => { this.setState({ gridReady: true }) }
                }}
            >
                {
                    active ? (
                        <div
                            className={ floatWrapClasses }
                            ref={ this._gridRef }
                        >
                            { modifiedChildren }
                        </div>
                    ) : (
                        <div ref={ this._gridRef }>
                            <Container fluid={ fluid } className={ className } { ...otherProps }>
                                { modifiedChildren }
                            </Container>
                        </div>
                    )
                }
                
            </FloatGridContext.Provider>
        );
    }

    _resizeHandler = () => {
        clearInterval(this._resizeDebounceTimeout);

        this._resizeDebounceTimeout = setTimeout(() => {
            this.setState({
                gridSize: {
                    w: this._gridRef.current.clientWidth,
                    h: this._gridRef.current.clientHeight
                }
            });
        }, 1000 / 60 * 10); //Every 10 frames debounce
    }
}