React Component for seamless iframe reload
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
SyncyFrame is able to render both external/local links and DocumentNode objects.
import SyncyFrame from 'react-syncy-frame';return <SyncyFrame = = =/>;;
import SyncyFrame from 'react-syncy-frame';const parser = ;const dom = parser;return <SyncyFrame = = =/>;;
Side note: dont forget to include css/style.css styles.
|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.|
To contribute, follow next steps:
- Fork this repo
- Commit your changes
- Open a Pull Request
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.
Released under the MIT License