use-responsive-dimension

Responsive dimension

This is a simple responsive dimension calculator. It calculates the dimension of an element based on the width of the parent element and the aspect ratio of the element.

Features

• Calculate the dimension of an element based on the width of the parent element and the aspect ratio of the element.
• Keeps the element within the parent element.
• Updates the dimension with the resize event of the window.

How to use

• Install the package using npm, yarn or pnpm.

npm install use-responsive-dimension

yarn add use-responsive-dimension

pnpm add use-responsive-dimension

• Create two container and one element. Learn more about this setup.

import React from 'react';

function IframeContainer() {

  const outerContainerRef = React.useRef(null);
  const innerContainerRef = React.useRef(null);
  const iframeRef = React.useRef(null);

  return (
    <div ref={outerContainerRef} style={{ width: '100%', height: '100vh' }}>
      <div ref={innerContainerRef}>
        <iframe ref={iframeRef} src="https://www.example.com/" />
      </div>
    </div>
  );
}

• Import the useResponsiveDimension hook and use it.

import React from 'react';

function IframeContainer() {

  const outerContainerRef = React.useRef(null);
  const innerContainerRef = React.useRef(null);
  const iframeRef = React.useRef(null);

    const { resetDimension, updateDimension, updateZoom } =
    useResponsiveDimension(outerContainerRef, innerContainerRef, iframeRef);

  return (
    <div ref={outerContainerRef} style={{ width: '100%', height: '100vh' }}>
      <div ref={innerContainerRef}>
        <iframe ref={iframeRef} src="https://www.example.com/" />
      </div>
    </div>
  );
}

Now, you can use the resetDimension, updateDimension and updateZoom functions to calculate the dimension of the iframe element. They update the dimension of the iframe and the inner container automatically.

Two container and one element setup

TBD

API

TBD

License

This project is licensed under the MIT License - see the LICENSE file for details.