Simple react component to center content horizontally and vertically

by React

React Center

Simple react component to center content horizontally and vertically.

Install

npm install --save react-center

Don't forget to manually install React^0.14 (peer dependency) if you're using npm@3.

View Demo Download Source

Use

ES6
import React from 'react';
import ReactDOM from 'react-dom';
import Center from 'react-center';

ReactDOM.render(
  <Center>
    <div>1</div>
  </Center>,
  document.getElementById('app')
);
ES5
var Center = require('react-center');
...
Good old 1998 Script Tag:

The component depends on React ^0.14 (a introduction of stateless components), so if you're using it without a build step, React ^0.14 must be present as a global.

<script src="https://npmcdn.com/react@^0.14/dist/react.min.js"></script>
<script src="https://npmcdn.com/react-dom@^0.14/dist/react-dom.min.js"></script>
<script src="https://npmcdn.com/react-center"></script>

API

Check tests.

Demo

Navigate to the 'demo' folder and execute

npm install
npm run build
npm start

GitHub