Skip to content

Commit 59bc274

Browse files
docs(readme): add "Migration" section and add TS example to FAQ
1 parent 3a559e4 commit 59bc274

File tree

1 file changed

+44
-6
lines changed

1 file changed

+44
-6
lines changed

README.md

Lines changed: 44 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -15,17 +15,17 @@ HTML to React parser that works on both the server (Node.js) and the client (bro
1515
HTMLReactParser(string[, options])
1616
```
1717

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
1923

2024
```js
2125
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!')
2327
```
2428

25-
To replace an element with a custom element, check out the [replace option](#replacedomnode).
26-
27-
Demos:
28-
2929
[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)
3030

3131
<details>
@@ -176,6 +176,20 @@ parse('<p id="replace">text</p>', {
176176
});
177177
```
178178

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+
179193
The following [example](https://repl.it/@remarkablemark/html-react-parser-replace-example) modifies the element along with its children:
180194

181195
```jsx
@@ -349,6 +363,26 @@ However, intentional whitespace may be stripped out:
349363
parse('<p> </p>', { trim: true }); // React.createElement('p')
350364
```
351365

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+
352386
## FAQ
353387

354388
#### Is this XSS safe?
@@ -410,6 +444,10 @@ parse('<CustomElement>', options); // React.createElement('CustomElement')
410444
411445
See [#62](https://github.com/remarkablemark/html-react-parser/issues/62) and [example](https://repl.it/@remarkablemark/html-react-parser-62).
412446
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+
413451
## Performance
414452
415453
Run benchmark:

0 commit comments

Comments
 (0)