Merge pull request #174 from cbbfcd/feat/patch-01

remarkablemark · web-flow · commit 461883e0285e · 2020-09-11T00:04:54.000-04:00
feat: export attributesToProps
diff --git a/README.md b/README.md
@@ -176,13 +176,31 @@ const options = {
 console.log(renderToStaticMarkup(parse(html, options)));
 ```
 
+Use the exported attributesToProps method to convert DOM attributes to React Props:
+
+```jsx
+import React from 'react';
+import parse, { attributesToProps } from 'html-react-parser';
+
+const html = `
+  <hr class="prettify" style="background:#fff;text-align:center" />
+`;
+
+const options = {
+  replace: node => {
+    if (node.attribs && node.name === 'hr') {
+      const props = attributesToProps(node.attribs);
+      return <hr {...props} />;
+    }
+  }
+};
+```
+
 Output:
 
 ```html
 <h1 style="font-size:42px">
-  <span style="color:hotpink">
-    keep me and make me pretty!
-  </span>
+  <span style="color:hotpink"> keep me and make me pretty! </span>
 </h1>
 ```
 
diff --git a/index.d.ts b/index.d.ts
@@ -2,6 +2,7 @@
 
 import { DomElement, ParserOptions } from 'htmlparser2';
 import domToReact from './lib/dom-to-react';
+import attributesToProps from './lib/attributes-to-props';
 import htmlToDOM from 'html-dom-parser';
 
 export interface HTMLReactParserOptions {
@@ -37,6 +38,6 @@ declare function HTMLReactParser(
   options?: HTMLReactParserOptions
 ): ReturnType<typeof domToReact>;
 
-export { DomElement, ParserOptions, domToReact, htmlToDOM };
+export { DomElement, ParserOptions, domToReact, htmlToDOM, attributesToProps };
 
 export default HTMLReactParser;
diff --git a/index.js b/index.js
@@ -1,4 +1,5 @@
 var domToReact = require('./lib/dom-to-react');
+var attributesToProps = require('./lib/attributes-to-props');
 var htmlToDOM = require('html-dom-parser');
 
 // decode HTML entities by default for `htmlparser2`
@@ -30,6 +31,7 @@ function HTMLReactParser(html, options) {
 
 HTMLReactParser.domToReact = domToReact;
 HTMLReactParser.htmlToDOM = htmlToDOM;
+HTMLReactParser.attributesToProps = attributesToProps;
 
 // support CommonJS and ES Modules
 module.exports = HTMLReactParser;
diff --git a/lib/attributes-to-props.d.ts b/lib/attributes-to-props.d.ts
@@ -0,0 +1,11 @@
+// TypeScript Version: 3.3
+
+/**
+ * Converts HTML/SVG DOM attributes to React props.
+ *
+ * @param attributes        - The HTML/SVG DOM attributes.
+ * @returns                 - The React props.
+ */
+export default function attributesToProps(
+  attributes: { [key: string]: string }
+): { [key: string]: string };
diff --git a/test/helpers/data.js b/test/helpers/data.js
@@ -6,7 +6,7 @@ module.exports.html = {
   multiple: '<p>foo</p><p>bar</p>',
   nested: '<div><p>foo <em>bar</em></p></div>',
   attributes:
-    '<hr id="foo" class="bar baz" style="background: #fff; text-align: center;" data-foo="bar" />',
+    '<hr id="foo" class="bar baz" style="background:#fff;text-align:center" data-foo="bar"/>',
   complex:
     '<html><head><meta charSet="utf-8"/><title>Title</title><link rel="stylesheet" href="style.css"/></head><body><header id="header">Header</header><h1 style="color:#000;font-size:42px">Heading</h1><hr/><p>Paragraph</p><img src="image.jpg"/><div class="class1 class2">Some <em>text</em>.</div><script>alert();</script></body></html>',
   textarea: '<textarea>foo</textarea>',
diff --git a/test/html-to-react.test.js b/test/html-to-react.test.js
@@ -129,6 +129,36 @@ describe('HTML to React', () => {
 
         expect(render(reactElement)).toBe(html);
       });
+
+      it('use attributesToProps to converts attributes to React props', () => {
+        const { attributesToProps } = parse;
+        const html = data.html.attributes;
+
+        let props;
+        const options = {
+          replace: node => {
+            if (node.attribs && node.name === 'hr') {
+              props = attributesToProps(node.attribs);
+              return {
+                type: 'hr',
+                props
+              };
+            }
+          }
+        };
+        const reactElement = parse(html, options);
+
+        expect(props).toEqual({
+          id: 'foo',
+          className: 'bar baz',
+          style: {
+            background: '#fff',
+            textAlign: 'center'
+          },
+          ['data-foo']: 'bar'
+        });
+        expect(render(reactElement)).toBe(html);
+      });
     });
 
     describe('library', () => {
