📏 react-scaled-props

Props that scale based on the size of their container

Try it yourself!

Install

npm install --save react-scaled-props

ResizeObserver

In order to efficiently observe changes to an element's size, we make use of ResizeObserver which is not fully implemented by every browser.

If your target browsers do not yet support ResizeObserver, you'll need to add a polyfill to your app in order to use 📏 react-scaled-props.

tl;dr - if you want cross-browser support, you probably need to do something like this:

import ResizeObserver from 'resize-observer-polyfill';

if (window.ResizeObserver === undefined) {
  window.ResizeObserver = ResizeObserver;
}

Usage / Quickstart

function App() {
  const boxRef = useRef(null);
  const fontSize = useScaledProp(boxRef, {
    // 'height' or 'width'
    dimension: 'width',
    // width where our fontSize will reach its minPropValue
    minDimensionValue: 200,
    // width where our fontSize will reach its maxPropValue
    maxDimensionValue: 600,
    // min fontSize value
    minPropValue: 12,
    // max fontSize value
    maxPropValue: 36,
  });

  return (
    <div ref={boxRef}>
      <p style={{ fontSize }}>I grow and shrink!</p>
    </div>
  );
}

License

MIT © tripphamm