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
.
;; { 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.
;; { 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. |
Support
This software is provided "as is", without warranty or support of any kind, express or implied. See license for details.