@@ -43,34 +43,58 @@ See more [examples](https://github.com/remarkablemark/html-react-parser/tree/mas
43
43
44
44
## Usage
45
45
46
- Render to DOM :
46
+ Given that you have the following required :
47
47
48
48
``` js
49
- var Parser = require (' html-react-parser' );
50
- var ReactDOM = require (' react-dom' );
49
+ // ES6
50
+ import Parser from ' html-react-parser' ;
51
+ import { render } from ' react-dom' ;
52
+ ```
51
53
52
- // single element
53
- ReactDOM .render (
54
+ You may render one element:
55
+
56
+ ``` js
57
+ render (
54
58
Parser (' <p>single</p>' ),
55
59
document .getElementById (' root' )
56
60
);
61
+ ```
62
+
63
+ You may render adjacent elements:
57
64
58
- // adjacent elements
59
- ReactDOM .render (
65
+ ``` js
66
+ // with JSX
67
+ render (
60
68
// the parser returns an array for adjacent elements
61
69
// so make sure they are nested under a parent React element
62
- React .createElement (' div' , {}, Parser (' <p>one</p><p>two</p>' ))
70
+ < div>
71
+ {Parser (' <p>brother</p><p>sister</p>' )}
72
+ < / div> ,
73
+ document .getElementById (' root' )
74
+ );
75
+
76
+ // without JSX
77
+ render (
78
+ React .createElement (' div' , {},
79
+ Parser (' <p>brother</p><p>sister</p>' )
80
+ ),
63
81
document .getElementById (' root' )
64
82
);
83
+ ```
84
+
85
+ You may render nested elements:
65
86
66
- // nested elements
67
- ReactDOM . render (
87
+ ``` js
88
+ render (
68
89
Parser (' <ul><li>inside</li></ul>' ),
69
90
document .getElementById (' root' )
70
91
);
92
+ ```
71
93
72
- // attributes are preserved
73
- ReactDOM .render (
94
+ The parser will also preserve attributes:
95
+
96
+ ``` js
97
+ render (
74
98
Parser (' <section id="foo" class="bar baz" data-qux="42">look at me now</section>' ),
75
99
document .getElementById (' root' )
76
100
);
0 commit comments