├── .gitignore
├── README.md
├── index.js
└── package.json
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # react-native-web-container
2 | A wrapper around the React Native WebView to add autoHeight and the ability to sanitize html using [sanitize-html](https://github.com/punkave/sanitize-html)
3 | ## Installation
4 | > npm install --save react-native-web-container
5 |
6 | ## Usage
7 |
8 | ### Example
9 | ```javascript
10 | import WebContainer from 'react-native-web-container';
11 |
12 | class MyWebView extends React.Component {
13 | render() {
14 | let html = '';
15 |
16 | return (
17 |
22 | );
23 | }
24 | }
25 | ```
26 | ### Properties
27 | | option | values |
28 | |---|---|
29 | | autoHeight | (default: `false`) automatically set the height of the WebView to fill the contains and remove the scroll bar |
30 | | makeSafe | (default: `false`) `false`: will not modify the html, `true`: will sanitize the html using the build in defaults, `object`: define a custom configuration for how to sanitize the html (See [docs](https://github.com/punkave/sanitize-html#how-to-use))
31 |
--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | import React from 'react-native';
4 | let { WebView } = React;
5 | import sanitizeHtml from 'sanitize-html';
6 | import _ from 'lodash';
7 |
8 | const script = '';
9 |
10 | const defaultSafeConfig = _.defaults(
11 | {
12 | allowedTags: sanitizeHtml.defaults.allowedTags.concat(['img', 'style']),
13 | allowedAttributes: _.defaults(
14 | {
15 | id: {allTags: true},
16 | style: {allTags: true},
17 | src: {allowedTags: ['img']}
18 | }, sanitizeHtml.defaults.allowedAttributes)
19 | },
20 | sanitizeHtml.defaults
21 | );
22 |
23 | let scrubHtml = function (html, makeSafe) {
24 | if (!html || makeSafe === false) {
25 | return html;
26 | }
27 |
28 | return safeHtml(
29 | html,
30 | _.isObject(makeSafe) ? makeSafe : defaultSafeConfig);
31 | };
32 |
33 | class WebContainer extends React.Component {
34 | constructor(props) {
35 | super();
36 | this.state = {
37 | height: props.height || 0
38 | };
39 | }
40 |
41 | onNavigationStateChange(navState) {
42 | this.setState({
43 | height: navState.title
44 | });
45 | }
46 |
47 | render() {
48 | let {
49 | html,
50 | style,
51 | autoHeight,
52 | makeSafe,
53 | scrollEnabled,
54 | ...props
55 | } = this.props;
56 |
57 | let scrubbedHtml = scrubHtml(html, makeSafe);
58 |
59 | return (
60 |
66 | );
67 | }
68 | }
69 |
70 | WebContainer.propTypes = {
71 | autoHeight: React.PropTypes.boolean,
72 | makeSafe: React.PropTypes.oneOf([
73 | React.PropTypes.boolean,
74 | React.PropTypes.object
75 | ])
76 | };
77 |
78 | WebContainer.defaultProps = {
79 | makeSafe: false
80 | };
81 |
82 | export default WebContainer;
83 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "react-native-web-container",
3 | "version": "1.0.0",
4 | "description": "A wrapper around the react native WebView to add autoHeight, scrub html, etc",
5 | "main": "index.js",
6 | "scripts": {
7 | "test": "echo \"Error: no test specified\" && exit 1"
8 | },
9 | "repository": {
10 | "type": "git",
11 | "url": "git+https://github.com/danrigsby/react-native-web-container.git"
12 | },
13 | "keywords": [
14 | "react-native",
15 | "react",
16 | "WebView"
17 | ],
18 | "author": "Dan Rigsby",
19 | "license": "MIT",
20 | "bugs": {
21 | "url": "https://github.com/danrigsby/react-native-web-container/issues"
22 | },
23 | "homepage": "https://github.com/danrigsby/react-native-web-container#readme",
24 | "devDependencies": {
25 | },
26 | "peerDependencies": {
27 | "react-native": ">=0.10.0"
28 | },
29 | "dependencies": {
30 | "lodash": "3.10.1",
31 | "sanitize-html": "^1.11.2"
32 | }
33 | }
34 |
--------------------------------------------------------------------------------