@native-html/iframe-plugin/lib/module/HTMLIframe.js

🌐 A WebView-based plugin to render iframes in react-native-render-html

import React, { useCallback, useMemo } from 'react';
import { HandleLinkPressFeature, InjectStyleFeature, ForceResponsiveViewportFeature, useWebshell } from '@formidable-webview/webshell';
import { View } from 'react-native';
import { linkPressTargetToOnDOMLinkPressArgs } from '@native-html/plugins-core';
/**
 * Configuration options for the HTMLIframe component.
 * You can pass those options through `renderersProps.iframe`
 * HTML prop.
 *
 * @public
 */

const RM_BODY_SPACING_CSS = 'body{padding: 0 !important; margin: 0 !important;}';
const features = [new HandleLinkPressFeature({
  preventDefault: true
})];
/**
 * A component to render iframes in react-native-render-html.
 *
 * @public
 */

export default function HTMLIframe({
  WebView,
  webViewProps: userWebViewProps,
  source,
  style,
  onLinkPress,
  scaleFactor,
  injectedCSSStyles,
  removeBodySpacing,
  scalesPageToFit = false
}) {
  const onDOMLinkPress = useCallback(event => onLinkPress === null || onLinkPress === void 0 ? void 0 : onLinkPress.apply(null, linkPressTargetToOnDOMLinkPressArgs(event)), [onLinkPress]);
  const injectedCss = useMemo(() => (removeBodySpacing && RM_BODY_SPACING_CSS || '').concat(injectedCSSStyles || ''), [injectedCSSStyles, removeBodySpacing]);
  const assembledFeatures = useMemo(() => {
    const feats = [...features, new ForceResponsiveViewportFeature({
      initScale: scalesPageToFit ? scaleFactor : 1,
      maxScale: scalesPageToFit ? scaleFactor : 1,
      minScale: scalesPageToFit ? scaleFactor : 1
    })];

    if (injectedCss) {
      feats.push(new InjectStyleFeature({
        css: injectedCss
      }));
    }

    return feats;
  }, [injectedCss, scaleFactor, scalesPageToFit]);
  const webViewProps = useWebshell({
    features: assembledFeatures,
    props: { ...userWebViewProps,
      onDOMLinkPress,
      source,
      testID: 'iframe'
    }
  }); // We need to wrap the WebView in a View to circumvent a bug in
  // react-native-webview, see https://git.io/JKY1r

  return /*#__PURE__*/React.createElement(View, {
    style: style
  }, /*#__PURE__*/React.createElement(WebView, webViewProps));
}
//# sourceMappingURL=HTMLIframe.js.map