uiwjs/react-iframePublic

generated fromuiwjs/react-monorepo-template

NotificationsYou must be signed in to change notification settings
Fork2
Star25

This component allows you to wrap your entire React application or each component in an <iframe>.

uiwjs.github.io/react-iframe

License

MIT license

25 stars 2 forks Branches Tags Activity

Star

Notifications

You must be signed in to change notification settings

Branches Tags

Folders and files

Name		Name	Last commit message	Last commit date
Latest commit History 26 Commits
.github		.github
.husky		.husky
core		core
test		test
website		website
.gitignore		.gitignore
.prettierignore		.prettierignore
.prettierrc		.prettierrc
LICENSE		LICENSE
README.md		README.md
lerna.json		lerna.json
package.json		package.json
renovate.json		renovate.json
tsconfig.json		tsconfig.json

Repository files navigation

^Using my app is also a way tosupport me:

react-iframe

This component allows you to wrap your entire React application or each component in an<iframe>.

Features

📚 Use Typescript to write, better code hints.
📦 Zero dependencies.
🐝 Encapsulation based on function components.
🍄 Provides comprehensive code test coverage.
🌐 Complete official documentdemo preview.

Installation

npm i @uiw/react-iframe

Basic Usage

importReactfrom'react';importIFramefrom'@uiw/react-iframe';exportdefaultfunctionDemo(){return(<IFrame><h1>Hello World!</h1></IFrame>);}

`head`

Thehead prop is a dom node that gets inserted before the children of the frame.

importReactfrom'react';importIFramefrom'@uiw/react-iframe';consthead=(<style>{`body { background: red; }`}</style>);exportdefaultfunctionDemo(){return(<IFramehead={head}><h1>Hello World!</h1></IFrame>);}

`initialContent`

TheinitialContent props is the initial html injected into frame. It is only injected once, but allows you to insert any html into the frame (e.g. a<head> tag,<script> tags, etc). Note that it does not update if you change the prop.

Defaults to<!DOCTYPE html><html><head></head><body></body></html>

importReactfrom'react';importIFramefrom'@uiw/react-iframe';constinitialContent='<!DOCTYPE html><html><head><title>React IFrame</title><meta name="keywords" content="react,iframe,component,development" /></head><body></body></html>';exportdefaultfunctionDemo(){return(<IFrameinitialContent={initialContent}><divstyle={{fontSize:32,color:'red'}}>Hello World!</div></IFrame>);}

`mountTarget`

ThemountTarget attribute is a css selector (#target/.target) that specifies the child within the initial content of the iframe to be mounted.

importReactfrom'react';importIFramefrom'@uiw/react-iframe';constinitialContent='<!DOCTYPE html><html><head></head><body><h1>i wont be changed</h1><div></div></body></html>';exportdefaultfunctionDemo(){return(<IFrameinitialContent={initialContent}mountTarget="#mountHere"><divstyle={{fontSize:32,color:'red'}}>Hello World!</div></IFrame>);}

`ref`

The ref prop provides a way to access inner<iframe> DOM node.

importReact,{useEffect,useState,Fragment}from'react';importIFramefrom'@uiw/react-iframe';exportdefaultfunctionDemo(){const[iframeRef,setIframeRef]=useState();const[count,setCount]=useState(0);useEffect(()=>{if(iframeRef){iframeRef.focus();}},[iframeRef]);constclick=()=>setCount(count+1);return(<Fragment><buttononClick={click}style={{display:'flex'}}>Click</button><IFrameref={(node)=>node&&setIframeRef(node)}><div>Hello World!</div><divstyle={{fontSize:32,color:'red'}}>{count}</div></IFrame></Fragment>);}

`src`

Open a URL in an<iframe>.

importReact,{useEffect,useState,Fragment}from'react';importIFramefrom'@uiw/react-iframe';exportdefaultfunctionDemo(){return(<IFramesrc="https://wangchujiang.com/"style={{width:'100%',height:320}}/>);}

Accessing the iframe's`window` and`document`

The iframe'swindow anddocument may be accessed via theFrameContext.Consumer or the useFrame hook.

importReact,{useEffect,useState,Fragment}from'react';importIFrame,{FrameContext}from'@uiw/react-iframe';exportdefaultfunctionDemo(){return(<IFrame><FrameContext.Consumer>{({ document, window})=>{return(<div><div>Hello World!</div></div>)}}</FrameContext.Consumer></IFrame>);}

The example withuseFrame hook:

importReact,{useEffect,useState,Fragment}from'react';importIFrame,{useFrame}from'@uiw/react-iframe';constInnerComponent=()=>{// Hook returns iframe's window and document instances from Frame contextconst{ document, window}=useFrame();return(<div><div>Hello World!</div></div>);};exportdefaultfunctionDemo(){return(<IFrame><InnerComponent/></IFrame>);}

Event

importReact,{useEffect,useState,Fragment}from'react';importIFrame,{useFrame}from'@uiw/react-iframe';constInnerComponent=()=>{// Hook returns iframe's window and document instances from Frame contextconst{ document, window}=useFrame();return(<div><div>Hello World!</div></div>);};exportdefaultfunctionDemo(){constonLoad=(evn)=>{console.log("iframe loaded successfully!",evn)}return(<IFrameonLoad={onLoad}><InnerComponent/></IFrame>);}

Props

exportinterfaceIFramePropsextendsReact.HTMLAttributes<HTMLIFrameElement>{head?:React.ReactNode;initialContent?:string;mountTarget?:string;}declareconstIFrame:import("react").ForwardRefExoticComponent<IFrameProps&import("react").RefAttributes<HTMLIFrameElement>>;exportdefaultIFrame;

Development

Runs the project in development mode.

# Step 1, run first, listen to the component compile and output the .js file# listen for compilation output type .d.ts filenpm run watch# Step 2, development mode, listen to compile preview website instancenpm run start

Builds the app for production to the build folder.