# react-center-component

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

Latest version **3.0.0** (published 2016-06-03) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-center-component
pnpm add react-center-component
yarn add react-center-component
bun add react-center-component
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 3.0.0 |
| Published | 2016-06-03 |
| First published | 2015-06-28 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 7 |
| Author | Qiming Weng |
| Maintainers | qiming |
| Keywords | react, center, component |

## Links

- npm: https://www.npmjs.com/package/react-center-component
- Repository: https://github.com/qimingweng/react-center-component
- Homepage: https://github.com/qimingweng/react-center-component#readme
- Issues: https://github.com/qimingweng/react-center-component/issues
- npm.io page: https://npm.io/package/react-center-component

## Dependencies (1)

- [lodash](https://npm.io/package/lodash.md) ^4.0.0

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 3.0.0 (latest) — 2016-06-03
- 2.0.1 — 2015-11-14
- 2.0.0 — 2015-11-14
- 1.0.1 — 2015-07-02
- 1.0.0 — 2015-06-28

## README

# React Center Component

[![npm](https://img.shields.io/npm/v/react-center-component.svg?style=flat-square)](https://www.npmjs.com/package/react-center-component)

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

```javascript
// 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>
    )
  }
}
```

```javascript
// ES5

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

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

---
_Source: https://npm.io/package/react-center-component · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._