/ Layout

Simple react component to center content horizontally and vertically

Simple react component to center content horizontally and vertically

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 [email protected]

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/[email protected]^0.14/dist/react.min.js"></script>
<script src="https://npmcdn.com/[email protected]^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