Wrap a single child with this component to make it auto-scale (transform) to fit its parent (or a maximum size specified through props).
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.
.myContent will scale to fit inside .myContainer.
importReact,{Component}from'react';importAutoScalefrom'react-auto-scale';exportdefaultclassMyComponentextendsComponent{render(){return(<divclassName="myContainer"><AutoScale><divclassName="myContent">Example</div></AutoScale></div>);}}.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.
importReact,{Component}from'react';importAutoScalefrom'react-auto-scale';exportdefaultclassMyComponentextendsComponent{render(){return(<divclassName="myContainer"><AutoScalemaxWidth={800}maxHeight={400}maxScale={3}><divclassName="myContent">Example</div></AutoScale></div>);}}| 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. |
This software is provided "as is", without warranty or support of any kind, express or implied. See license for details.