
Security News
Oracle Drags Its Feet in the JavaScript Trademark Dispute
Oracle seeks to dismiss fraud claims in the JavaScript trademark dispute, delaying the case and avoiding questions about its right to the name.
@native-html/iframe-plugin
Advanced tools
🌐 A WebView-based plugin to render iframes in react-native-render-html
:warning: This documentation is for react-native-render-html v6 (@native-html/iframe-plugin@2.x). For v5, go here.
🌐 A WebView-based plugin to render iframes in react-native-render-html.
Install:
:warning: With expo, use
expo install
instead to grab a compatiblereact-native-webview
version.
npm add --save @native-html/iframe-plugin react-native-webview
yarn add @native-html/iframe-plugin react-native-webview
Features:
onLinkPress
;defaultWebViewProps
;react-native-web
via @formidable-webview/web
Known Limitations:
react-native-web
, onLinkPress
will not work for external domains.react-native-render-html | @native-html/iframe-plugin |
---|---|
≥ 5.0.0 < 6.0.0 | 1.x (documentation) |
≥ 6.0.0 | 2.x (documentation) |
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 */
}
}
}}
/>;
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
.
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):
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}
/>
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
Documentation for all exports of this library is available here.
FAQs
🌐 A WebView-based plugin to render iframes in react-native-render-html
The npm package @native-html/iframe-plugin receives a total of 8,245 weekly downloads. As such, @native-html/iframe-plugin popularity was classified as popular.
We found that @native-html/iframe-plugin demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Oracle seeks to dismiss fraud claims in the JavaScript trademark dispute, delaying the case and avoiding questions about its right to the name.
Security News
The Linux Foundation is warning open source developers that compliance with global sanctions is mandatory, highlighting legal risks and restrictions on contributions.
Security News
Maven Central now validates Sigstore signatures, making it easier for developers to verify the provenance of Java packages.