What's Changed

• fix: update FrameContextProps to use Document by @JamesSingleton in https://github.com/ryanseddon/react-frame-component/pull/244
• fix: call createPortal() on null tartget by @deathemperor in https://github.com/ryanseddon/react-frame-component/pull/255

New Contributors

• @JamesSingleton made their first contribution in https://github.com/ryanseddon/react-frame-component/pull/244
• @deathemperor made their first contribution in https://github.com/ryanseddon/react-frame-component/pull/255

Full Changelog: https://github.com/ryanseddon/react-frame-component/compare/v5.2.6...v5.2.7

• Fix handleLoad call from setInterval (#236) 606edcf

https://github.com/ryanseddon/react-frame-component/compare/v5.2.5...v5.2.6

Note: Please use 5.2.4, this version has a bug and will be superseded when a fix is rolled out. See #234

This release uses DOMContentLoaded as a better strategy over onload when more complex intitialContent payloads are provided.
This also accounts for timing issues and uses setInterval to account for cold cache timing issues on resource intensive frames.

• Rely on DOMContentLoaded instead of onload (#207) 334d0ef
• Fallback to setInterval if DOMContentLoaded fails 28584e87951e3ce400dfb87964bd9ab7a13051d7

https://github.com/ryanseddon/react-frame-component/compare/v5.2.4...v5.2.5

• fix: change default export away from React.Component (#227) e4cd1ca
• Bump shell-quote from 1.6.1 to 1.7.4 (#233) d5c25a3
• Bump decode-uri-component from 0.2.0 to 0.2.2 (#232) bb2c04e
• Bump engine.io from 6.2.0 to 6.2.1 (#231) d5235ba
• Bump socket.io-parser from 4.0.4 to 4.0.5 (#230) 73f0fb5
• Bump minimatch and wallaby-webpack (#229) b841e81
• Bump css-what from 2.1.0 to 2.1.3 (#228) e725602

https://github.com/ryanseddon/react-frame-component/compare/v5.2.3...v5.2.4

Building on v5.2.2-alpha.1 if DOMContentLoaded never fires we fallback with a setInterval

• Fallback to setInterval if DOMContentLoaded fails 28584e8

https://github.com/ryanseddon/react-frame-component/compare/v5.2.2-alpha.1...v5.2.3-alpha.0

• fix: use correct value type for ref prop (#215) eafe14a

https://github.com/ryanseddon/react-frame-component/compare/v5.2.2...v5.2.3

This adds types directly to the package. You'll no longer need to rely on @types/react-frame-component

• Update types (#213) 24f9dc5

https://github.com/ryanseddon/react-frame-component/compare/v5.2.1...v5.2.2

Building on v5.2.2-alpha.0 to try removing forceUpdate, guarding against a double state update and re-introducing the onLoad attribute.

• Seems to still have issues on chrome for some apps trying something else ae128fd

https://github.com/ryanseddon/react-frame-component/compare/v5.2.2-alpha.0...v5.2.2-alpha.1

This is a pre-release testing whether using DOMContentLoaded is a better strategy over onload when more complex intitialContent payloads are provided.

• Rely on DOMContentLoaded instead of onload 39262db

https://github.com/ryanseddon/react-frame-component/compare/v5.2.1...v5.2.2-alpha.0

• fix: rename index.ts to index.d.ts (#203) 0158d7a

https://github.com/ryanseddon/react-frame-component/compare/v5.2.0...v5.2.1

Forwarding iframe ref

Allow to pass ref prop to Frame component which will allow to reach the inner iframe HTMLIFrameElement.
The ref forwarding is done by React.forwardRef helper which wraps the original Frame class component instance.

• Forward iframe ref and use React.createRef (#189) b68a2f2

Example usage:

function Foo() {
  const iframeRef = React.useRef()

  React.useEffect(() => {
    iframeRef.style.setProperty('background-color', 'pink');
  }, [])

  <Frame ref={iframeRef} />
}

Other changes

• Bump path-parse from 1.0.5 to 1.0.7 (#196) 950cff6
• Bump tar from 2.2.1 to 2.2.2 (#195) 095e538
• Include index.ts in npm tar ball (#191) 9250906

https://github.com/ryanseddon/react-frame-component/compare/v5.1.0...v5.2.0

Adds new useFrame hook for access to iframes window and document host objects without the need for the context render prop pattern.

• useFrame hook (#190) 12e4cb3

import { useFrame } from 'react-frame-component';

function Foo (props) {
  const { window, document } = useFrame();

  /* rest of the component */
}

https://github.com/ryanseddon/react-frame-component/compare/v5.0.1...v5.1.0

Adds index.ts file to declare module for Typescript

• add declare module (#129) 1bba891
• Bump hosted-git-info from 2.1.5 to 2.8.9 (#187) b133def
• Bump ua-parser-js from 0.7.12 to 0.7.28 (#186) 25d5b8f
• Bump sockjs from 0.3.18 to 0.3.21 (#184) 1678466

https://github.com/ryanseddon/react-frame-component/compare/v5.0.0...v5.0.1

This is a breaking change

This library now uses srcDoc which means no support for IE11 in v5 if you need IE11 support you can continue to use v4.1.3.

srcDoc is also async vs doc.write being sync, this will mostly go unnoticed in most use cases. However if you're relying on this library in unit tests you may need to convert those test to async aware tests. This means you'll need to use the done callback in most unit test frameworks.

Why the change?

document.write is now bad practice for performance reasons and will be flagged accordingly in various web perf testing tools, srcDoc is a viable alternative without the perf downsides.

Commits

• Switch karma to use chrome canary (#183) efea53c
• Fix doc.write violation by using srcDoc (#124) 5d690fe
• Trigger on pull_request 2dc373d
• Bump ini from 1.3.4 to 1.3.7 (#179) 016c84c
• Remove travis ci 958496b
• Setup ci action 2e3e014
• funding 931304d

https://github.com/ryanseddon/react-frame-component/compare/v4.1.3...v5.0.0

This pre-release is testing whether srcdoc usage over doc.write() is a better move going forward. It's a breaking change as srcdoc is async.

By changing to srcdoc this will drop support for IE11.