@native-html/iframe-plugin
TypeScript icon, indicating that this package has built-in type declarations

2.6.1ย โ€ขย Publicย โ€ขย Published

โš ๏ธ This documentation is for react-native-render-html v6 (@native-html/iframe-plugin@2.x). For v5, go here.

@native-html/iframe-plugin

npm semver codecov CI Discord

๐ŸŒ A WebView-based plugin to render iframes in react-native-render-html.


Install:

โš ๏ธ With expo, use expo install instead to grab a compatible react-native-webview version.

npm add --save @native-html/iframe-plugin react-native-webview
yarn add @native-html/iframe-plugin react-native-webview

Features:

  • Supports onLinkPress;
  • Supports defaultWebViewProps;
  • Compliance with RFC001: scales to available width;
  • Autoscale feature (adapt zoom level to available width! Disabled by default.);
  • A single renderer component exported as default, super easy to plug-in!
  • Compatible with react-native-web via @formidable-webview/web

Known Limitations:

  • With react-native-web, onLinkPress will not work for external domains.

Compat Table

react-native-render-html @native-html/iframe-plugin
โ‰ฅ 5.0.0 < 6.0.0 1.x (documentation)
โ‰ฅ 6.0.0 2.x (documentation)

Minimal working example

import IframeRenderer, { iframeModel } from '@native-html/iframe-plugin';
import RenderHTML from 'react-native-render-html';
import WebView from 'react-native-webview';

const renderers = {
  iframe: IframeRenderer
};

const customHTMLElementModels = {
  iframe: iframeModel
};

// ...

<RenderHTML
  renderers={renderers}
  WebView={WebView}
  source={{ html: '<iframe ...></iframe>' }}
  customHTMLElementModels={customHTMLElementModels}
  defaultWebViewProps={
    {
      /* Any prop you want to pass to all WebViews */
    }
  }
  renderersProps={{
    iframe: {
      scalesPageToFit: true,
      webViewProps: {
        /* Any prop you want to pass to iframe WebViews */
      }
    }
  }}
/>;

Customizing

To customize the behavior of this renderer, you can pass a config object to the renderersProps.iframe prop of RenderHTML component.

See the documentation for this object here: IframeConfig.

Zoom on the autoscale feature

When scalesPageToFit is set to true, if the iframe width (as determined by the width element attribute) is greater than the available width (as determined by HTML props contentWidth and computeEmbeddedMaxWidth), the WebView will be zoomed out by just the right amount to have no horizontal cropping. This is equivalent to resizeMode: 'contain' for images. See example below with scalesPageToFit enabled (left) and disabled (right):

Providing headers

import IframeRenderer, { iframeModel } from '@native-html/iframe-plugin';
import RenderHTML from 'react-native-render-html';
import WebView from 'react-native-webview';

const renderers = {
  iframe: IframeRenderer
}

const customHTMLElementModels = {
  iframe: iframeModel
}

function provideEmbeddedHeaders(uri, tagName) {
  if (tagName === "iframe" && uri.startsWith("https://protected-domain.com")) {
    // Pass an authorization header to all iframes in protected-domain.com
    return {
      Authorization: "Bearer XXXXXXXX";
    }
  }
}

// ...

<RenderHTML renderers={renderers}
      WebView={WebView}
      source={{ html: '<iframe width="400" height="200" src="https://protected-domain.com/user/cart?embedded"></iframe>' }}
      customHTMLElementModels={customHTMLElementModels}
      provideEmbeddedHeaders={provideEmbeddedHeaders}
/>

Customizing the renderer

You can customize the renderer logic thanks to useHtmlIframeProps hook, iframeModel and HTMLIframe exports:

import {
  useHtmlIframeProps,
  HTMLIframe,
  iframeModel
} from '@native-html/iframe-plugin';

const IframeRenderer = function IframeRenderer(props) {
  const iframeProps = useHtmlIframeProps(props);
  // Do customize the props here; wrap with your own container...
  return <HTMLIframe {...iframeProps} />;
};

const renderers = {
  iframe: IframeRenderer
};

// use "renderers" prop in your RenderHTML instance

API Reference

Documentation for all exports of this library is available here.

Versions

Current Tags

  • Version
    Downloads (Last 7 Days)
    • Tag
  • 2.6.1
    6,155
    • latest
  • 1.1.2
    244
    • 1x

Version History

Package Sidebar

Install

npm i @native-html/iframe-plugin

Weekly Downloads

14,431

Version

2.6.1

License

MIT

Unpacked Size

103 kB

Total Files

56

Last publish

Collaborators

  • jsamr