react-rectangle

A simple box with fixed aspect ratio

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
react-rectangle
831.3.37 years ago7 years agoMinified + gzip package size for react-rectangle in KB

Readme

npm version Build Status Build status Dependency Status devDependency Status Coverage Status MIT licensed
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. ````html ````

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