@@ -15,17 +15,17 @@ HTML to React parser that works on both the server (Node.js) and the client (bro
15
15
HTMLReactParser(string[, options])
16
16
```
17
17
18
- The parser converts an HTML string to one or more [ React elements] ( https://reactjs.org/docs/react-api.html#creating-react-elements ) :
18
+ The parser converts an HTML string to one or more [ React elements] ( https://reactjs.org/docs/react-api.html#creating-react-elements ) .
19
+
20
+ To replace an element with a custom element, check out the [ replace option] ( #replacedomnode ) .
21
+
22
+ #### Example
19
23
20
24
``` js
21
25
const parse = require (' html-react-parser' );
22
- parse (' <div>text</div >' ); // equivalent to ` React.createElement('div ', {}, 'text')`
26
+ parse (' <p>Hello, World!</p >' ); // React.createElement('p ', {}, 'Hello, World!')
23
27
```
24
28
25
- To replace an element with a custom element, check out the [ replace option] ( #replacedomnode ) .
26
-
27
- Demos:
28
-
29
29
[ CodeSandbox] ( https://codesandbox.io/s/940pov1l4w ) | [ Repl.it] ( https://repl.it/@remarkablemark/html-react-parser ) | [ JSFiddle] ( https://jsfiddle.net/remarkablemark/7v86d800/ ) | [ Examples] ( https://github.com/remarkablemark/html-react-parser/tree/master/examples )
30
30
31
31
<details >
@@ -176,6 +176,20 @@ parse('<p id="replace">text</p>', {
176
176
});
177
177
```
178
178
179
+ For TypeScript projects, check that ` domNode ` is an instance of domhandler's ` Element ` :
180
+
181
+ ``` tsx
182
+ import { Element } from ' domhandler/lib/node' ;
183
+
184
+ parse (' <p id="replace">text</p>' , {
185
+ replace : domNode => {
186
+ if (domNode instanceof Element && domNode .attribs .id === ' replace' ) {
187
+ return <span >replaced</span >;
188
+ }
189
+ }
190
+ });
191
+ ```
192
+
179
193
The following [ example] ( https://repl.it/@remarkablemark/html-react-parser-replace-example ) modifies the element along with its children:
180
194
181
195
``` jsx
@@ -349,6 +363,26 @@ However, intentional whitespace may be stripped out:
349
363
parse (' <p> </p>' , { trim: true }); // React.createElement('p')
350
364
```
351
365
366
+ ## Migration
367
+
368
+ ### 1.0.0
369
+
370
+ TypeScript projects will need to check the types in [ v1.0.0] ( https://github.com/remarkablemark/html-react-parser/releases/tag/v1.0.0 ) .
371
+
372
+ For ` replace ` option:
373
+
374
+ ``` tsx
375
+ import { Element } from ' domhandler/lib/node' ;
376
+
377
+ parse (' <br class="remove">' , {
378
+ replace : domNode => {
379
+ if (domNode instanceof Element && domNode .attribs .class === ' remove' ) {
380
+ return <></>;
381
+ }
382
+ }
383
+ });
384
+ ```
385
+
352
386
## FAQ
353
387
354
388
#### Is this XSS safe?
@@ -410,6 +444,10 @@ parse('<CustomElement>', options); // React.createElement('CustomElement')
410
444
411
445
See [#62](https://github.com/remarkablemark/html-react-parser/issues/62) and [example](https://repl.it/@remarkablemark/html-react-parser-62).
412
446
447
+ #### TS Error: Property 'attribs' does not exist on type 'DOMNode'
448
+
449
+ The TypeScript error happens because `DOMNode` needs be an instance of domhandler's `Element`. See [#199](https://github.com/remarkablemark/html-react-parser/issues/199).
450
+
413
451
## Performance
414
452
415
453
Run benchmark:
0 commit comments