html-react-parser 3.0.16 → 4.1.0

package/README.md

@@ -38,13 +38,15 @@ parse('<p>Hello, World!</p>'); // React.createElement('p', {}, 'Hello, World!')
     - [replace element and children](#replace-element-and-children)
     - [replace element attributes](#replace-element-attributes)
     - [replace and remove element](#replace-and-remove-element)
+  - [transform](#transform)
   - [library](#library)
   - [htmlparser2](#htmlparser2)
   - [trim](#trim)
 - [Migration](#migration)
-  - [v3.0.0](#v300)
-  - [v2.0.0](#v200)
-  - [v1.0.0](#v100)
+  - [v4](#v4)
+  - [v3](#v3)
+  - [v2](#v2)
+  - [v1](#v1)
 - [FAQ](#faq)
   - [Is this XSS safe?](#is-this-xss-safe)
   - [Does invalid HTML get sanitized?](#does-invalid-html-get-sanitized)
@@ -64,7 +66,6 @@ parse('<p>Hello, World!</p>'); // React.createElement('p', {}, 'Hello, World!')
   - [Financial Contributors](#financial-contributors)
     - [Individuals](#individuals)
     - [Organizations](#organizations)
-- [Enterprise](#enterprise)
 - [Support](#support)
 - [License](#license)
 
@@ -97,13 +98,15 @@ yarn add html-react-parser
 
 ## Usage
 
-Import or require the module:
+Import ES module:
 
 ```js
-// ES Modules
 import parse from 'html-react-parser';
+```
+
+Or require CommonJS module:
 
-// CommonJS
+```js
 const parse = require('html-react-parser');
 ```
 
@@ -301,6 +304,21 @@ HTML output:
 <p></p>
 ```
 
+### transform
+
+The `transform` option allows you to transform each element individually after it's parsed.
+
+The `transform` callback's first argument is the React element:
+
+```jsx
+parse('<br>', {
+  transform: (reactNode, domNode, index) => {
+    // this will wrap every element in a div
+    return <div>{reactNode}</div>;
+  }
+});
+```
+
 ### library
 
 The `library` option specifies the UI library. The default library is **React**.
@@ -375,17 +393,21 @@ parse('<p> </p>', { trim: true }); // React.createElement('p')
 
 ## Migration
 
-### v3.0.0
+### v4
+
+[htmlparser2](https://github.com/fb55/htmlparser2) has been upgraded to [v9](https://github.com/fb55/htmlparser2/releases/tag/v9.0.0).
+
+### v3
 
 [domhandler](https://github.com/fb55/domhandler) has been upgraded to v5 so some [parser options](https://github.com/fb55/htmlparser2/wiki/Parser-options) like `normalizeWhitespace` have been removed.
 
-Also, it's recommended to upgrade to the latest version of [typescript](https://www.npmjs.com/package/typescript).
+Also, it's recommended to upgrade to the latest version of [TypeScript](https://www.npmjs.com/package/typescript).
 
-### v2.0.0
+### v2
 
 Since [v2.0.0](https://github.com/remarkablemark/html-react-parser/releases/tag/v2.0.0), Internet Explorer (IE) is no longer supported.
 
-### v1.0.0
+### v1
 
 TypeScript projects will need to update the types in [v1.0.0](https://github.com/remarkablemark/html-react-parser/releases/tag/v1.0.0).
 
@@ -558,12 +580,6 @@ Support this project with your organization. Your logo will show up here with a
 [![Financial Contributors - Organization 8](https://opencollective.com/html-react-parser/organization/8/avatar.svg)](https://opencollective.com/html-react-parser/organization/8/website)
 [![Financial Contributors - Organization 9](https://opencollective.com/html-react-parser/organization/9/avatar.svg)](https://opencollective.com/html-react-parser/organization/9/website)
 
-## Enterprise
-
-Available as part of the Tidelift Subscription.
-
-The maintainers of html-react-parser and thousands of other packages are working with Tidelift to deliver commercial support and maintenance for the open source packages you use to build your applications. Save time, reduce risk, and improve code health, while paying the maintainers of the exact packages you use. [Learn more.](https://tidelift.com/subscription/pkg/npm-html-react-parser?utm_source=npm-html-react-parser&utm_medium=referral&utm_campaign=enterprise&utm_term=repo)
-
 ## Support
 
 - [GitHub Sponsors](https://b.remarkabl.org/github-sponsors)
@@ -572,7 +588,7 @@ The maintainers of html-react-parser and thousands of other packages are working
 - [Patreon](https://b.remarkabl.org/patreon)
 - [Ko-fi](https://b.remarkabl.org/ko-fi)
 - [Liberapay](https://b.remarkabl.org/liberapay)
-- [Teepsring](https://b.remarkabl.org/teespring)
+- [Teespring](https://b.remarkabl.org/teespring)
 
 ## License
 

package/dist/html-react-parser.js

@@ -2398,13 +2398,18 @@
 	  return !elementsWithNoTextChildren.has(node.name);
 	}
 
+	function returnFirstArg(arg) {
+	  return arg;
+	}
+
 	var utilities$2 = {
 	  PRESERVE_CUSTOM_ATTRIBUTES: PRESERVE_CUSTOM_ATTRIBUTES,
 	  invertObject: invertObject,
 	  isCustomComponent: isCustomComponent,
 	  setStyleProp: setStyleProp$1,
 	  canTextBeChildOfNode: canTextBeChildOfNode$1,
-	  elementsWithNoTextChildren: elementsWithNoTextChildren
+	  elementsWithNoTextChildren: elementsWithNoTextChildren,
+	  returnFirstArg: returnFirstArg
 	};
 
 	var reactProperty = lib;
@@ -2513,6 +2518,7 @@
 	 * @param {DomElement[]} nodes - DOM nodes.
 	 * @param {object} [options={}] - Options.
 	 * @param {Function} [options.replace] - Replacer.
+	 * @param {Function} [options.transform] - Transform.
 	 * @param {object} [options.library] - Library (React, Preact, etc.).
 	 * @returns - String or JSX element(s).
 	 */
@@ -2528,6 +2534,7 @@
 	  var node;
 	  var isWhitespace;
 	  var hasReplace = typeof options.replace === 'function';
+	  var transform = options.transform || utilities.returnFirstArg;
 	  var replaceElement;
 	  var props;
 	  var children;
@@ -2548,7 +2555,7 @@
 	            key: replaceElement.key || i
 	          });
 	        }
-	        result.push(replaceElement);
+	        result.push(transform(replaceElement, node, i));
 	        continue;
 	      }
 	    }
@@ -2570,7 +2577,7 @@
 
 	      // We have a text node that's not whitespace and it can be nested
 	      // in its parent so add it to the results
-	      result.push(node.data);
+	      result.push(transform(node.data, node, i));
 	      continue;
 	    }
 
@@ -2617,7 +2624,7 @@
 	      props.key = i;
 	    }
 
-	    result.push(createElement(node.name, props, children));
+	    result.push(transform(createElement(node.name, props, children), node, i));
 	  }
 
 	  return result.length === 1 ? result[0] : result;