โคNucleus Powered Mitochondria

    @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.

    Install

    npm i @native-html/iframe-plugin

    DownloadsWeekly Downloads

    1,849

    Version

    2.6.1

    License

    MIT

    Unpacked Size

    103 kB

    Total Files

    56

    Last publish

    Collaborators

    • jsamr