Skip to content
iframe-resizer

React

Install

Install this package with the following command.

Terminal window
npm install @iframe-resizer/react --save

You will also need to ensure that the @iframe-resizer/child package has been loaded into every page that loads into the iframe.

Usage

The <IframeResizer /> component can be passed all<iframe> attributes, along with options and events from iframe-resizer. You can also optionally pass a forwardRef to gain access to a few methods that provide a simple interface to communicate with the page in the iframe.

<IframeResizer
  {iframe attributes}
  {iframe-resizer options}
  {iframe-resizer events}
  {forwardRef}
/>

Typical setup

The normal configuration is to have the iframe resize when the browser window changes size or the content of the iframe changes. To set this up you need to configure one of the dimensions of the iframe to a percentage and tell the library to only update the other dimension. Normally you would set the width to 100% and have the height scale to fit the content.

<IframeResizer
  license="xxxx"
  src="http://anotherdomain.com/iframe.html"
  style={{ width: '100%',  height: '100vh' }}
  waitForLoad
/>

Setting the initial height of the iframe to 100vh makes the loading in of the iframe appear smoother to the user, as they will only see the content below the iframe once it has completed loading and undergone it’s initial sizing.

The waitForLoad option defers sending a message to the iframe until after the onload event fires on the iframe. If their is any possibility that the iframe content could load before the JavaScript runs, then you should set this option to false. This is only likely to be an issue with server side rendering.

Child page

You will then need to install the @iframe-resizer/child package on every page in the iframe.

API Differences

The React version of iframe-resizer supports the Parent Page API with a couple of minor changes to the available methods. To access these methods you need to pass a forwardRef as follows.

import React, { useRef, useEffect } from 'react'
import IframeResizer from '@iframe-resizer/react'


export default () => {
  const iframeRef = useRef(null)


  useEffect(() => {
    console.log(iframeRef?.getElement())
  })


  return (
    <IframeResizer forwardRef={iframeRef} />
  )

disconnect()

This method is not available, use React to remove the iframe from the page.

getElement()

Returns the iframe element.

getRef()

Returns a ref to the iframe.

Advanced Example

This is a more advanced configuration, which demonstrates the use of options, events and methods from the Parent Page API.

import { useRef, useState } from 'react'
import IframeResizer from '@iframe-resizer/react'
import MessageData from './message-data.jsx'


function App() {
  const iframeRef = useRef(null)
  const [messageData, setMessageData] = useState()


  const onResized = (data) => setMessageData(data)


  const onMessage = (data) => {
    setMessageData(data)
    iframeRef.current.sendMessage('Hello back from the parent page')
  }


  return (
    <>
      <IframeResizer
        license="xxxx"
        forwardRef={iframeRef}
        inPageLinks
        onMessage={onMessage}
        onResized={onResized}
        src="child.html"
        style={{ width: '100%', height: '100vh'}}
      />
      <MessageData data={messageData} />
    </>
  )
}


export default App

The <MessageData/> component is then used to display some of the data returned from the iframe.

const MessageData = ({ data }) =>
  data ? (
    data.message ? (
      <span>
        <b>Frame ID:</b> {data.iframe.id} <br/>
        <b>Message:</b> {data.message}
      </span>
    ) : (
      <span>
        <b>Frame ID:</b> {data.iframe.id} <br/>
        <b>Height:</b> {data.height} <br/>
        <b>Width:</b> {data.width} <br/>
        <b>Event type:</b> {data.type}
      </span>
    )
  ) : null


export default MessageData
Was this page useful?