react-syncy-frame v1.2.0
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-frameBasic 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