@@ -77,10 +77,10 @@ yarn add @native-html/iframe-plugin react-native-webview
77
77
78
78
## Compat Table
79
79
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) ) |
84
84
85
85
## Minimal working example
86
86
@@ -91,22 +91,33 @@ import WebView from 'react-native-webview';
91
91
92
92
const renderers = {
93
93
iframe: IframeRenderer
94
- }
94
+ };
95
95
96
96
const customHTMLElementModels = {
97
97
iframe: iframeModel
98
- }
98
+ };
99
99
100
100
// ...
101
101
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
+ / > ;
110
121
```
111
122
112
123
## Customizing
@@ -167,7 +178,11 @@ function provideEmbeddedHeaders(uri, tagName) {
167
178
You can customize the renderer logic thanks to ` useHtmlIframeProps ` hook, ` iframeModel ` and ` HTMLIframe ` exports:
168
179
169
180
``` 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' ;
171
186
172
187
const IframeRenderer = function IframeRenderer (props ) {
173
188
const iframeProps = useHtmlIframeProps (props);
@@ -177,7 +192,7 @@ const IframeRenderer = function IframeRenderer(props) {
177
192
178
193
const renderers = {
179
194
iframe: IframeRenderer
180
- }
195
+ };
181
196
182
197
// use "renderers" prop in your RenderHTML instance
183
198
```
0 commit comments