React Rectangle

A very simple React component which provides a box with fixed aspect ratio.

Install

npm install --save react-rectangle

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

Use

ES6

import React from 'react';
import ReactDOM from 'react-dom';
import Rectangle from 'react-rectangle';
 
ReactDOM.render(
  <div style={{ background: '#9e9e9e', width: '100vw', height: '100vh' }}>
    <Rectangle aspectRatio={[5, 3]}>
      <div style={{ background: '#607d8b', width: '100%', height: '100%' }} />
    </Rectangle>
  </div>,
  document.getElementById('app')
);

ES5

var Rectangle = require('react-rectangle');

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-rectangle"></script>

API

The components takes a single prop 'aspectRatio'. You can pass a value in different formats:

• if omitted, defaults to 1, i.e. square
• number: width to height ratio
• string: the same, but as a string
• array: [0] - relative width, [1] - relative height
• object: object.width - relative width, object.height - relative height

Also check tests.

Demo

Navigate to the 'demo' folder and execute

npm install
npm run build
npm start

Resize your browser's windows to see the component in action.

Codepen example

http://codepen.io/aush/pen/OMorPv