Skip to content

Latest commit

 

History

History
87 lines (70 loc) · 3.45 KB

README.md

File metadata and controls

87 lines (70 loc) · 3.45 KB

React SyncyFrame

React Component for seamless iframe reload

Build Status Coverage Status NPM Version

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