https://github.com/phuocng/frame

An iframe wrapper that resizes based on its content automatically
https://github.com/phuocng/frame

Last synced: 4 months ago
JSON representation

An iframe wrapper that resizes based on its content automatically

• Host: GitHub
• URL: https://github.com/phuocng/frame
• Owner: phuocng
• License: mit
• Created: 2021-09-23T14:19:51.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2021-10-14T13:26:06.000Z (over 3 years ago)
• Last Synced: 2024-10-11T00:16:40.650Z (4 months ago)
• Language: TypeScript
• Size: 832 KB
• Stars: 12
• Watchers: 1
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Frame

A React component that wraps an `iframe` inside an element:

-   [x] The `iframe` is only loaded when it is visible in the screen

-   [x] The `iframe` is resized automatically when its content resizes

Due to the cross domain (CORS) issue, it only supports `iframe` whose `src` belongs to the same domain of your site.

This component has been used in some 1milligram's products such as [FormValidation](https://formvalidation.io)

![Demo](https://raw.githubusercontent.com/1milligram/frame/main/assets/form-validation-demo.gif)

### Usage

1. Install the package:

```shell

$ npm install @1milligram/frame

```

2. Using the `Frame` component:

```js

import { Frame } from '@1milligram/frame';

import '@1milligram/frame/lib/styles/index.css';

;

```

### Options

**Setting the frame height**

For any reason that you would like to do your own calculation to adjust the frame height:

```js

const setFrameHeight = (doc: Document) => {

    // `doc` is the document instance of the iframe content

    return doc.body.scrollHeight;

};

;

```