feat: add useFrame.

Author: jaywcjlove

core/README.md

@@ -134,6 +134,57 @@ export default function Demo() {
   );
 }
 ```
+
+## Accessing the iframe's `window` and `document`
+
+The iframe's `window` and `document` may be accessed via the `FrameContext.Consumer` or the useFrame hook.
+
+```tsx mdx:preview
+import React, { useEffect, useState, Fragment } from 'react';
+import IFrame, { FrameContext } from '@uiw/react-iframe';
+
+export default function Demo() {
+  return (
+    <IFrame>
+      <FrameContext.Consumer>
+        {({ document, window }) => {
+          return (
+            <div>
+              <div>Hello World!</div>
+            </div>
+          )
+        }}
+      </FrameContext.Consumer>
+    </IFrame>
+  );
+}
+```
+
+The example with `useFrame` hook:
+
+```tsx mdx:preview
+import React, { useEffect, useState, Fragment } from 'react';
+import IFrame, { useFrame } from '@uiw/react-iframe';
+
+const InnerComponent = () => {
+  // Hook returns iframe's window and document instances from Frame context
+  const { document, window } = useFrame();
+  return (
+    <div>
+      <div>Hello World!</div>
+    </div>
+  );
+};
+
+export default function Demo() {
+  return (
+    <IFrame>
+      <InnerComponent />
+    </IFrame>
+  );
+}
+```
+
 ## Props
 
 ```ts

core/src/Context.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+
+let doc;
+let win;
+if (typeof document !== 'undefined') {
+  doc = document;
+}
+if (typeof window !== 'undefined') {
+  win = window;
+}
+
+export const FrameContext = React.createContext<ContextProps>({ document: doc, window: win });
+
+interface ContextProps {
+  document?: Document | null;
+  window?: Window | null;
+}
+
+export const useFrame = () => React.useContext<ContextProps>(FrameContext);

core/src/index.tsx

@@ -1,5 +1,8 @@
 import { useCallback, useEffect, useState, forwardRef, useImperativeHandle } from 'react';
 import { createPortal } from 'react-dom';
+import { FrameContext } from './Context';
+
+export { FrameContext, useFrame } from './Context';
 
 export interface IFrameProps
   extends React.DetailedHTMLProps<React.IframeHTMLAttributes<HTMLIFrameElement>, HTMLIFrameElement> {
@@ -52,11 +55,15 @@ const IFrame = forwardRef<HTMLIFrameElement, IFrameProps>(
     }, [mountNode, handleLoad]);
 
     const renderFrameContents = () => {
+      const doc = getDoc();
       const header = getDoc()?.head;
       const mountTarget = getMountTarget();
+      // @ts-ignore
+      const win = doc?.defaultView || doc?.parentView;
+      const contents = <FrameContext.Provider value={{ document: doc, window: win }}>{children}</FrameContext.Provider>;
       return [
         header && head && createPortal(head, header),
-        mountNode && mountTarget && createPortal(children, mountTarget),
+        mountNode && mountTarget && createPortal(contents, mountTarget),
       ];
     };
     const reProps: IFrameProps = {};