react-rectangle

#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