React-auto-scale NPM

React Auto Scale

Wrap a single child with this component to make it auto-scale (transform) to fit its parent (or a maximum size specified through props).

Installation

Requires React 0.14 or later. Currently uses element-resize-event to detect resizing of elements without polling.

npm install --save react-auto-scale

This assumes that you’re using npm package manager with a module bundler like Webpack or Browserify to consume CommonJS modules.

Usage

Simple

.myContent will scale to fit inside .myContainer.

import React, { Component } from 'react';
import AutoScale from 'react-auto-scale';

export default class MyComponent extends Component {
  render() {
    return (
      <div className="myContainer">
        <AutoScale>
          <div className="myContent">Example</div>
        </AutoScale>
      </div>
    );
  }
}

A tiny bit less simple

.myContent will scale to fit inside .myContainer, but will at most grow to 400 px high, or 800 px wide, or at most 3x its original size.

import React, { Component } from 'react';
import AutoScale from 'react-auto-scale';

export default class MyComponent extends Component {
  render() {
    return (
      <div className="myContainer">
        <AutoScale maxWidth={800} maxHeight={400} maxScale={3}>
          <div className="myContent">Example</div>
        </AutoScale>
      </div>
    );
  }
}

Props

Prop	Default	Description
`maxHeight`	`null`	Number of pixels. Restrict the scale so that the content is at most this high.
`maxWidth`	`null`	Number of pixels. Restrict the scale so that the content is at most this wide.
`maxScale`	`null`	Don't scale beyond this number, i e `2` will scale at most 2x the original size.
`wrapperClass`	`""`	Class of the wrapper element, the outermost `div` that wraps the content.
`containerClass`	`""`	Class of the container element, the next outermost `div` that wraps the content.
`contentClass`	`""`	Class of the content element, the `div` that contains the content.