@uiw/react-iframev1.0.3

This component allows you to wrap your entire React application or each component in an iFrame.

react-iframe

Build & Deploy Coverage Status npm version

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 document demo preview.

Installation

npm i @uiw/react-iframe

Basic Usage

Code Example

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

Code Example

initialContent

The initialContent 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>

Code Example

mountTarget

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

Code Example

ref

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

Code Example

src

Open a URL in an <iframe>.

Code Example

Accessing the iframe's window and document

The iframe's window and document may be accessed via the FrameContext.Consumer or the useFrame hook.

Code Example

The example with useFrame hook:

Code Example

Event

Code Example

Props

export interface IFrameProps extends React.HTMLAttributes<HTMLIFrameElement> {
  head?: React.ReactNode;
  initialContent?: string;
  mountTarget?: string;
}
declare const IFrame: import("react").ForwardRefExoticComponent<IFrameProps & import("react").RefAttributes<HTMLIFrameElement>>;
export default IFrame;

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 file
npm run watch
# Step 2, development mode, listen to compile preview website instance
npm run start

Builds the app for production to the build folder.

npm run build

The build is minified and the filenames include the hashes. Your app is ready to be deployed!

Contributors

As always, thanks to our amazing contributors!

Made with contributors.

License

Licensed under the MIT License.

Top