Adds vertical prop, for scaling based on parent height

README.md

@@ -142,6 +142,28 @@ The default is `inherit`, so typically you will already have a resonable fallbac
 </div>
 ```
 
+## `vertical`
+
+Add the `vertical` prop to scale vertically, rather than horiztonally (the default).
+
+```
+<div style={{ height: '75vh' }}>
+  <FitText vertical compressor={1.25}>
+    <ul>
+      <li>Waterfront</li>
+      <li>Vancouver City Centre</li>
+      <li>Yaletown–Roundhouse</li>
+      <li>Olympic Village</li>
+      <li>Broadway–City Hall</li>
+      <li>King Edward</li>
+      <li>Oakridge–41st Avenue</li>
+      <li>Langara–49th Avenue</li>
+      <li>Marine Drive</li>
+    </ul>
+  </FitText>
+</div>
+```
+
 ## Running locally
 
 ```sh

src/FitText.js

@@ -59,19 +59,25 @@ class FitText extends React.Component {
     return true
   }
 
-  _getFontSize(width) {
+  _getFontSize(value) {
     const props = this.props
 
     return Math.max(
-      Math.min(width / (props.compressor * 10), props.maxFontSize),
+      Math.min(value / (props.compressor * 10), props.maxFontSize),
       props.minFontSize
     )
   }
 
   _onBodyResize() {
     if (this.element && this.element.offsetWidth) {
-      let width = this.element.offsetWidth
-      let newFontSize = this._getFontSize(width)
+      let value = this.element.offsetWidth
+
+      if (this.props.vertical && this.element.offsetHeight) {
+        value = this.element.parentNode.offsetHeight
+        console.log('value', this.element)
+      }
+
+      let newFontSize = this._getFontSize(value)
 
       this.setState({
         fontSize: `${newFontSize}px`,

stories/index.js

@@ -100,6 +100,47 @@ storiesOf('FitText', module)
       <FitText compressor={2}>The Quick Brown Fox</FitText>
     ))
   )
+  .add(
+    'with scaling based on vertical height',
+    withInfo(
+      'Scaling within a vertical space, rather than a horizontal space.'
+    )(() => (
+      <div style={{ height: '75vh', outline: '2px dotted silver' }}>
+        <FitText vertical compressor={0.9}>
+          <div>
+            <ul
+              style={{
+                listStyle: 'none',
+                margin: 0,
+                padding: 0,
+                lineHeight: '1.3',
+              }}>
+              {[
+                'Waterfront',
+                'Vancouver City Centre',
+                'Yaletown–Roundhouse',
+                'Olympic Village',
+                'Broadway–City Hall',
+                'King Edward',
+                'Oakridge–41st Avenue',
+                'Langara–49th Avenue',
+                'Marine Drive',
+              ].map((item, index) => {
+                return (
+                  <li key={`vertical_${index}`} style={{ fontWeight: '100' }}>
+                    {item}{' '}
+                    <span style={{ fontSize: '0.25em', fontWeight: '400' }}>
+                      Check times →
+                    </span>
+                  </li>
+                )
+              })}
+            </ul>
+          </div>
+        </FitText>
+      </div>
+    ))
+  )
   .add(
     'with line breaks',
     withInfo('More info')(() => {
@@ -112,7 +153,9 @@ storiesOf('FitText', module)
         <div>
           <FitText compressor={1.2}>
             <div style={style}>
-              ABCDEFGHIJKLMN<br />OPQRSTUVWXYZ
+              ABCDEFGHIJKLMN
+              <br />
+              OPQRSTUVWXYZ
             </div>
           </FitText>
           <FitText compressor={1.2}>