Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@rio-cloud/iframe-resizer

Package Overview
Dependencies
Maintainers
2
Versions
10
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@rio-cloud/iframe-resizer

RIO Iframe resizer

  • 0.0.8
  • latest
  • Source
  • npm
  • Socket score

Version published
Maintainers
2
Created
Source

Build Status License

iframe-resizer

Purpose

This Iframe-Resizer wrapper is a react component which embeds an SPA in an Iframe. It responsively resizes the height of the Iframe and its displayed content. It can be used to render websites within an iFrame whose size changes dynamically.

Current Features

This container service currently covers the following features:

  • IframeResizer gets height from SPA via PostMessage
  • Responsive resizing
  • Unit-Tests
  • Integration testing

Prerequisites

Your SPA needs to be able to send its height to the parent window via postMessage whenever it's size changes, and you will need to implement this functionality yourself. ForExample:

function onResize() {
    if (document.referrer) {
        const height = document.body.clientHeight;
        window.parent.postMessage({ height: height }, document.referrer);
    }
}

The IframeResizer will listen for these messages and behave accordingly. If your SPA is also written in React, you would probably implement this in a componentDidUpdate() function.

Usage

  1. In your parent, where you want to display the Iframe : Update your package.json and add the Iframe-Resizer to the dependencies:
"@rio-cloud/iframe-resizer": "0.0.1"
  1. Execute npm install

  2. Add the in your parentApplication.js with the URL of the SPA you want to display in it and add it to the rendering.

import IframeResizer from '@rio-cloud/iframe-resizer';

const myGreatApp = <IframeResizer url={"https://myToBeDisplayedSPA_URL/"}/>

Local development and testing

To start the demo app locally, first run npm run start-demo then run npm run start in a separate terminal.

License

iframe-resizer is licensed under the Apache 2.0 license.

FAQs

Package last updated on 11 May 2020

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc