react-syncy-frame

Hello World

React SyncyFrame

React Component for seamless iframe reload

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. 👍 reactions). Before submitting a feature request, please search for similar ones in the closed issues.

License

Released under the MIT License