@@ -77,10 +77,10 @@ yarn add @native-html/iframe-plugin react-native-webview
7777
7878## Compat Table
7979
80- | react-native-render-html | @native-html/iframe-plugin |
81- | ------------------------ | ------------------------------------------------------------------- |
82- | ≥ 5.0.0 < ; 6.0.0 | 1.x ([ documentation] ( /tree/rnrh/5.x/packages/iframe-plugin#readme ) ) |
83- | ≥ 6.0.0 | 2.x ([ documentation] ( / tree/rnrh/6.x/packages/iframe-plugin#readme) |
80+ | react-native-render-html | @native-html/iframe-plugin |
81+ | ------------------------ | --------------------------------------------------------------------------------------------------------- |
82+ | ≥ 5.0.0 < ; 6.0.0 | 1.x ([ documentation] ( https://github.com/native-html/plugins /tree/rnrh/5.x/packages/iframe-plugin#readme) ) |
83+ | ≥ 6.0.0 | 2.x ([ documentation] ( https://github.com/native-html/plugins/ tree/rnrh/6.x/packages/iframe-plugin#readme) ) |
8484
8585## Minimal working example
8686
@@ -91,22 +91,33 @@ import WebView from 'react-native-webview';
9191
9292const renderers = {
9393 iframe: IframeRenderer
94- }
94+ };
9595
9696const customHTMLElementModels = {
9797 iframe: iframeModel
98- }
98+ };
9999
100100// ...
101101
102- < RenderHTML renderers= {renderers}
103- WebView= {WebView}
104- source= {{ html: ' <iframe ...></iframe>' }}
105- customHTMLElementModels= {customHTMLElementModels}
106- defaultWebViewProps= {{ /* Any prop you want to pass to all WebViews */ }}
107- renderersProps= {{ iframe: { scalesPageToFit: true , webViewProps: { /* Any prop you want to pass to iframe WebViews */ } }}}
108- / >
109-
102+ < RenderHTML
103+ renderers= {renderers}
104+ WebView= {WebView}
105+ source= {{ html: ' <iframe ...></iframe>' }}
106+ customHTMLElementModels= {customHTMLElementModels}
107+ defaultWebViewProps= {
108+ {
109+ /* Any prop you want to pass to all WebViews */
110+ }
111+ }
112+ renderersProps= {{
113+ iframe: {
114+ scalesPageToFit: true ,
115+ webViewProps: {
116+ /* Any prop you want to pass to iframe WebViews */
117+ }
118+ }
119+ }}
120+ / > ;
110121```
111122
112123## Customizing
@@ -167,7 +178,11 @@ function provideEmbeddedHeaders(uri, tagName) {
167178You can customize the renderer logic thanks to ` useHtmlIframeProps ` hook, ` iframeModel ` and ` HTMLIframe ` exports:
168179
169180``` jsx
170- import {useHtmlIframeProps , HTMLIframe , iframeModel } from ' @native-html/iframe-plugin' ;
181+ import {
182+ useHtmlIframeProps ,
183+ HTMLIframe ,
184+ iframeModel
185+ } from ' @native-html/iframe-plugin' ;
171186
172187const IframeRenderer = function IframeRenderer (props ) {
173188 const iframeProps = useHtmlIframeProps (props);
@@ -177,7 +192,7 @@ const IframeRenderer = function IframeRenderer(props) {
177192
178193const renderers = {
179194 iframe: IframeRenderer
180- }
195+ };
181196
182197// use "renderers" prop in your RenderHTML instance
183198```
0 commit comments