Overview

SyncyFrame allows to make seamless transitions between dynamic iframe reloads. Under the hood it uses 2 iframes in order to render current and next iframe states. Once next-state iframe is loaded, current one is deleted for performance optimization.

If you want to add some features or to suggest any idea, feel free - contributions are always welcome.

How to Install

In order to use react-syncy-frame simply do:

npm install --save react-syncy-frame

Basic Example

SyncyFrame is able to render both external/local links and DocumentNode objects.

import SyncyFrame from 'react-syncy-frame';

export default () => {
  return (<SyncyFrame width={'480px'} height={'320px'} src={'http://yourlink.com'}/>);
};

import SyncyFrame from 'react-syncy-frame';

export default () => {
  const parser = new DOMParser();
  const dom = parser.parse('<h1>Hello World</h1>', 'text/html');
  return (<SyncyFrame width={'480px'} height={'320px'} src={dom}/>);
};

Side note: dont forget to include css/style.css styles.

Props

Property | Type | Description -------- | ---- | ------------ src | String or DocumentNode | Target url or document which needs to be rendered. Required. width | String | SyncyFrame width. Can be set in any css units eg. px, vw, vh, % etc. Auto by default. height | String | SyncyFrame height. Can be set in any css units eg. px, vw, vh, % etc. Auto by default. transitionDelay | Number | Delay time between syncy frame src transition. onBeforeLoad | function | Callback which gets called before target iframe is loaded. Receives an iframe element as an argument. onDocumentFetch | function | Callback to be called once document is fetched into the iframe. Gets called between onBeforeLoad and onLoad. onLoad | function | Callback which gets called once target iframe is loaded. Receives an iframe element as an argument.

Contributing

Contributions are always welcome. Before contributing please read the code of conduct & search the issue tracker (your issue may have already been discussed or fixed).

To contribute, follow next steps:

• Fork this repo
• Commit your changes
• Open a Pull Request

Feature Requests

Feature requests should be submitted in the issue tracker, with a description of the expected behavior & use case, where they'll remain closed until sufficient interest (e.g. :+1: reactions). Before submitting a feature request, please search for similar ones in the closed issues.

License

Released under the MIT License