|
1 |
| -import parse, { HTMLReactParserOptions, domToReact, htmlToDOM } from 'html-react-parser'; |
| 1 | +import parse, { |
| 2 | + HTMLReactParserOptions, |
| 3 | + domToReact, |
| 4 | + htmlToDOM |
| 5 | +} from 'html-react-parser'; |
2 | 6 | import * as React from 'react';
|
3 | 7 |
|
4 |
| -/* $ExpectType ReactElement | ReactElement[] */ |
5 |
| -parse('<div>text</div>'); |
| 8 | +// $ExpectType Element | Element[] |
| 9 | +parse('<p>text</p>'); |
6 | 10 |
|
7 |
| -// `options.replace` |
8 |
| - |
9 |
| -// Return React.createElement from `replace` |
10 |
| -parse('<p id="replace">text</p>', { |
| 11 | +// $ExpectType Element | Element[] |
| 12 | +parse('<br id="replace">', { |
11 | 13 | replace: domNode => {
|
12 | 14 | if (domNode.attribs && domNode.attribs.id === 'replace') {
|
13 |
| - return React.createElement('span', {}, 'replaced'); |
| 15 | + return <span>replaced</span>; |
14 | 16 | }
|
15 | 17 | }
|
16 | 18 | });
|
17 | 19 |
|
18 |
| -// Return ReactElement |
19 |
| -const options: HTMLReactParserOptions = { |
| 20 | +// $ExpectType Element | Element[] |
| 21 | +parse('<br id="remove">', { |
20 | 22 | replace({ attribs }) {
|
21 |
| - return attribs && attribs.id === 'remove' && <React.Fragment />; |
| 23 | + return attribs && attribs.id === 'remove' && <></>; |
22 | 24 | }
|
23 |
| -}; |
| 25 | +}); |
24 | 26 |
|
25 |
| -parse('<p><br id="remove"></p>', options); |
| 27 | +let options: HTMLReactParserOptions; |
26 | 28 |
|
27 |
| -// Return domhandler node |
28 |
| -parse('<a id="header" href="#">Heading</a>', { |
| 29 | +options = { |
29 | 30 | replace: node => {
|
30 | 31 | if (node.attribs && node.attribs.id === 'header') {
|
31 |
| - return { |
32 |
| - type: 'h1', |
33 |
| - props: { children: 'Heading' } |
34 |
| - }; |
| 32 | + return; |
35 | 33 | }
|
36 | 34 | }
|
37 |
| -}); |
| 35 | +}; |
| 36 | + |
| 37 | +// $ExpectType Element | Element[] |
| 38 | +parse('<a id="header" href="#">Heading</a>', options); |
38 | 39 |
|
39 | 40 | // $ExpectType DomElement[]
|
40 |
| -const dom = htmlToDOM('<div>text</div>'); |
| 41 | +const domNodes = htmlToDOM('<div>text</div>'); |
41 | 42 |
|
42 |
| -/* $ExpectType ReactElement | ReactElement[] */ |
43 |
| -domToReact(dom); |
| 43 | +// $ExpectType Element | Element[] |
| 44 | +domToReact(domNodes); |
0 commit comments