Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including react-ratio with all npm packages installed. Try it out:

require("react/package.json"); // react is a peer dependency. require("react-dom/package.json"); // react-dom is a peer dependency. var reactRatio = require("react-ratio")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

react-ratio v0.1.5

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

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

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free