remarkablemark / html-react-parser

html-react-parser HTML to React parser that works on both the server (Node.js) and the client (browser): The parser converts an HTML string to one or more React elements. To replace an element with another element, check out the option. Example StackBlitz | TypeScript | JSFiddle | Examples Table of Contents • Install • Usage • replace • replace with TypeScript • replace element and children • replace element attributes • replace and remove element • transform • library • htmlparser2 • trim • Migration • v5 • v4 • v3 • v2 • v1 • FAQ • Is this XSS safe? • Does invalid HTML get sanitized? • Are tags parsed? • Attributes aren't getting called • Parser throws an error • Is SSR supported? • Elements aren't nested correctly • Don't change case of tags • TS Error: Property 'attribs' does not exist on type 'DOMNode' • Can I enable for certain elements? • Webpack build warnings • TypeScript error • Performance • Contributors • Code Contributors • Financial Contributors • Individuals • Organizations • Support • License Install NPM: Yarn: CDN: Usage Import ES module: Or require CommonJS module: Parse single element: Parse multiple elements: Make sure to render parsed adjacent elements under a parent element: Parse nested elements: Parse element with attributes: replace The option allows you to replace an element with another element. The callback's first argument is domhandler's node: Console output The element is replaced if a **valid** React element is returned: The second argument is the index: > [!NOTE] > > The index will restart at 0 when traversing the node's children so don't rely on index being a unique key. See #1259. replace with TypeScript You need to check that is an instance of domhandler's : Or use a type assertion: If you're having issues, take a look at our Create React App example. replace element and children Replace the element and its children (see demo): HTML output replace element attributes Convert DOM attributes to React props with : HTML output replace and remove element Exclude an element from rendering by replacing it with : HTML output transform The option allows you to transform each element individually after it's parsed. The callback's first argument is the React element: library The option specifies the UI library. The default library is **React**. To use Preact: Or a custom library: htmlparser2 > [!WARNING] > > options _**do not work** on the client-side_ (browser); they _**only work** on the server-side_ (Node.js). By overriding the options, it can break universal rendering. Default htmlparser2 options can be overridden in >=0.12.0. To enable : trim By default, whitespace is preserved: But certain elements like will strip out invalid whitespace: To remove whitespace, enable the option: However, intentional whitespace may be stripped out: Migration v5 Migrated to TypeScript. CommonJS imports require the key: If you're getting the error: Then use type assertion: See #1126. v4 htmlparser2 has been upgraded to v9. v3 domhandler has been upgraded to v5 so some parser options like have been removed. Also, it's recommended to upgrade to the latest version of TypeScript. v2 Since v2.0.0, Internet Explorer (IE) is no longer supported. v1 TypeScript projects will need to update the types in v1.0.0. For the option, you may need to do the following: Since v1.1.1, Internet Explorer 9 (IE9) is no longer supported. FAQ Is this XSS safe? No, this library is _**not**_ XSS (cross-site scripting) safe. See #94. Does invalid HTML get sanitized? No, this library does _**not**_ sanitize HTML. See #124, #125, and #141. Are tags parsed? Although tags and their contents are rendered on the server-side, they're not evaluated on the client-side. See #98. Attributes aren't getting called The reason why your HTML attributes aren't getting called is because inline event handlers (e.g., ) are parsed as a _string_ rather than a _function_. See #73. Parser throws an error If the parser throws an error, check if your arguments are valid. See "Does invalid HTML get sanitized?". Is SSR supported? Yes, server-side rendering on Node.js is supported by this library. See demo. Elements aren't nested correctly If your elements are nested incorrectly, check to make sure your HTML markup is valid. The HTML to DOM parsing will be affected if you're using self-closing syntax ( ) on non-void elements: See #158. Don't change case of tags Tags are lowercased by default. To prevent that from happening, pass the htmlparser2 option: > [!WARNING] > > By preserving case-sensitivity of the tags, you may get rendering warnings like: > > See #62 and example. TS Error: Property 'attribs' does not exist on type 'DOMNode' The TypeScript error occurs because needs to be an instance of domhandler's . See migration or #199. Can I enable for certain elements? Yes, you can enable or disable for certain elements using the option. See #205. Webpack build warnings If you see the Webpack build warning: Then update your Webpack config to: See #238 and #213. TypeScript error If you see the TypeScript error: Then upgrade to the latest version of typescript. See #748. Performance Run benchmark: Output of benchmark run on MacBook Pro 2024: Run Size Limit: Contributors Code Contributors This project exists thanks to all the people who contribute. [Contribute]. Financial Contributors Become a financial contributor and help us sustain our community. [Contribute] Individuals Organizations Support this project with your organization. Your logo will show up here with a link to your website. [Contribute] Support • GitHub Sponsors • Open Collective • Tidelift • Patreon • Ko-fi • Liberapay • Teespring License MIT