react-center-component

A higher order component decorator to center a component in the window

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
react-center-component
723.0.08 years ago9 years agoMinified + gzip package size for react-center-component in KB

Readme

React Center Component
npm
This is a higher order component decorator. It centers a component with respect to the window.
It listens for when its children are mounted, then it measures the size of these children on the dom. Then it updates the children with appropriate top and left offsets.
Components that are wrapped with this decorator recieve two properties topOffset and leftOffset, they are null before the component has mounted.
When the window is resized, this component will reupdate its children. This process is debounced by 100ms to reduce CPU strain.
Usage
// ES7

import React from 'react';
import centerComponent from 'react-center-component';

@centerComponent
export class ModalDialog extends React.Component {
  static propTypes = {
    topOffset: React.PropTypes.number,
    leftOffset: React.PropTypes.number
  }
  render = () => {
    const {topOffset, leftOffset} = this.props;

    const dialogStyle = {
      position: 'absolute',
      width: 100,
      height: 100,
      top: this.props.topOffset,
      left: this.props.leftOffset
    }

    return (
      <div style={dialogStyle}>
        Centered
      </div>
    )
  }
}

// ES5

var React = require('react');
var centerComponent = require('react-center-component');

var Component = React.createClass({
  ...
});
var CenteredComponent = centerComponent(Component);