React aspect ratio component
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
docs-src Docs Jan 23, 2018
docs v0.1.4 - Fixed babel configuration Feb 1, 2018
src Init Jan 23, 2018
.babelrc v0.1.5 - Fixed babel configuration, removed env conf Feb 1, 2018
.editorconfig Init Jan 23, 2018
.eslintrc Init Jan 23, 2018
.gitignore Init Jan 23, 2018
.npmignore Init Jan 23, 2018
LICENSE.md Init Jan 23, 2018
README.md Typo Jan 23, 2018
package-lock.json v0.1.3 - Updated dependencies, moved babel env to dev dependencies. Jan 27, 2018
package.json v0.1.5 - Fixed babel configuration, removed env conf Feb 1, 2018
webpack.config.js Init Jan 23, 2018

README.md

React aspect ratio component

npm version npm downloads

Small component that allows you to create responsive elements that will keep their ratio on different screen sizes.

It uses standard CSS hack to achieve it. Please note that Ratio ads wrapper element which makes things easier in certain scenarios.

Demo

Usage

import React, { Component } from 'react';
import Ratio from 'react-ratio';

export default class Example extends Component {
  render() {
    return (
      <Ratio ratio={ 16 / 9 }>
        YOUR CONTENT GOES HERE
      </Ratio>
    );
  }
}

Props

  • ratio, default 1

    Aspect ratio value. E.g. for 16:9 ratio, pass 16 / 9.

    Zero will default it back to one.

  • className, default ''

    Wrapper element class name

  • ratioClassName, default ''

    Helper div class name.

  • contentClassName, default ''

    Content div class name

  • style, default {}

    Object with CSS styles for the wrapper element. By default it adds display: block but it can be overridden.

  • tagName, default 'div'

    HTML element to be used for the wrapper element. E.g. you can pass a or aside.

All other props will be pass to the wrapper element. This is useful for passing accessibility props like aria-label or tabIndex.

License

MIT