html-react-parser - npm Package Compare versions

Comparing version 0.0.6 to 0.0.7

package.json

 {
   "name": "html-react-parser",
-  "version": "0.0.6",
+  "version": "0.0.7",
   "description": "An HTML to React parser.",
@@ -8,4 +8,4 @@ "author": "Mark <[e-mail]>",
   "scripts": {
-    "build": "NODE_ENV=development webpack index.js dist/html-to-react.js",
-    "build-min": "NODE_ENV=production webpack -p index.js dist/html-to-react.min.js",
+    "build": "NODE_ENV=development webpack index.js dist/html-react-parser.js",
+    "build-min": "NODE_ENV=production webpack -p index.js dist/html-react-parser.min.js",
     "prepublish": "npm run build && npm run build-min",
@@ -12,0 +12,0 @@ "test": "mocha",

README.md

@@ -10,3 +10,3 @@ # html-react-parser
 
-An HTML to React parser.
+An HTML to React parser:
 
@@ -17,12 +17,12 @@ ```
 
-The parser converts an HTML string to [React element(s)](https://facebook.github.io/react/docs/glossary.html#react-elements). You can also `replace` element(s) with your own custom React element(s) via the parser options.
+The parser converts a string of HTML to [React Element(s)](https://facebook.github.io/react/docs/glossary.html#react-elements).
 
-### Example
+There is also an option to [replace](#replacedomnode) element(s) with your own React Element(s) via the [parser options](#options).
 
+#### Example
+
 ```js
 var Parser = require('html-react-parser');
-var reactElement = (
-    Parser('<p>Hello, world!</p>') // same as `React.createElement('p', {}, 'Hello, world!')`
-);
-require('react-dom').render(reactElement, document.getElementById('root'));
+Parser('<p>Hello, world!</p>');
+// same output as `React.createElement('p', {}, 'Hello, world!')`
 ```
@@ -36,32 +36,66 @@
 
+Or you can download the script from a CDN:
+
+```html
+<!-- HTMLReactParser depends on React -->
+<script src="https://unpkg.com/react@latest/dist/react.min.js"></script>
+<script src="https://unpkg.com/html-react-parser@latest/dist/html-react-parser.min.js"></script>
+```
+
+See more [examples](https://github.com/remarkablemark/html-react-parser/tree/master/examples).
+
 ## Usage
 
-Render to DOM:
+Given that you have the following required:
 
 ```js
-var Parser = require('html-react-parser');
-var ReactDOM = require('react-dom');
+// ES6
+import Parser from 'html-react-parser';
+import { render } from 'react-dom';
+```
 
-// single element
-ReactDOM.render(
+You may render one element:
+
+```js
+render(
     Parser('<p>single</p>'),
     document.getElementById('root')
 );
+```
 
-// adjacent elements
-ReactDOM.render(
+You may render adjacent elements:
+
+```js
+// with JSX
+render(
     // the parser returns an array for adjacent elements
     // so make sure they are nested under a parent React element
-    React.createElement('div', {}, Parser('<p>one</p><p>two</p>'))
+    <div>
+        {Parser('<p>brother</p><p>sister</p>')}
+    </div>,
     document.getElementById('root')
 );
 
-// nested elements
-ReactDOM.render(
+// without JSX
+render(
+    React.createElement('div', {},
+        Parser('<p>brother</p><p>sister</p>')
+    ),
+    document.getElementById('root')
+);
+```
+
+You may render nested elements:
+
+```js
+render(
     Parser('<ul><li>inside</li></ul>'),
     document.getElementById('root')
 );
+```
 
-// attributes are preserved
-ReactDOM.render(
+The parser will also preserve attributes:
+
+```js
+render(
     Parser('<section id="foo" class="bar baz" data-qux="42">look at me now</section>'),
@@ -76,103 +110,56 @@ document.getElementById('root')
 
-The `replace` method allows you to swap an element with your own React element.
+The `replace` method allows you to swap an element with your own React Element.
 
-The first argument is `domNode`, which is an object which shares the same schema as the output from [htmlparser2.parseDOM](https://github.com/fb55/domhandler#example).
+The first argument is `domNode`, which is an object that has the same output as [htmlparser2.parseDOM](https://github.com/fb55/domhandler#example).
 
+The element is only replaced if a valid React Element is returned.
+
 ```js
+// with JSX
 Parser('<p id="replace">text</p>', {
-    replace: function(domNode) {
-        console.log(domNode);
-        // {  type: 'tag',
-        //    name: 'p',
-        //    attribs: { id: 'replace' },
-        //    children: [],
-        //    next: null,
-        //    prev: null,
-        //    parent: null }
-
-        return;
-        // element is not replaced because
-        // a valid React element is not returned
-    }
-});
-```
-
-Simple example:
-
-```js
-var Parser = require('html-react-parser');
-var React = require('react');
-
-var html = (
-    '<div>' +
-        '<p id="replace">'
-            'replace me' +
-        '</p>' +
-    '</div>'
-);
-
-var reactElement = Parser(html, {
-    replace: function(domNode) {
+    replace: (domNode) => {
         if (domNode.attribs && domNode.attribs.id === 'replace') {
-            return React.createElement('span', {
-                style: { fontSize: '42px' }
-            }, 'replaced!');
-            // equivalent jsx syntax:
-            // return <span style={{ fontSize: '42px' }}>replaced!</span>;
+            return <span>replaced</span>;
         }
     }
 });
-
-require('react-dom').render(
-    reactElement,
-    document.getElementById('root')
-);
-// <div>
-//     <span style="font-size: 42px;">
-//         replaced!
-//     </span>
-// </div>
 ```
 
-Advanced example (the replaced element's children are kept):
+Advanced example (keep the replaced children):
 
 ```js
-var Parser = require('html-react-parser');
-var React = require('react');
+// with ES6 and JSX
 
-// used for recursively parsing DOM created from the HTML
-var domToReact = require('html-react-parser/lib/dom-to-react');
+// converts dom object to React Elements
+import domToReact from 'html-react-parser/lib/dom-to-react';
 
-var html = (
-    '<div>' +
-        '<p id="main">' +
-            '<span class="prettify">' +
-                'keep me and make me pretty!' +
-            '</span>' +
-        '</p>' +
-    '</div>'
-);
+const html = `
+    <div>
+        <p id="main">
+            <span class="prettify">
+                keep me and make me pretty!
+            </span>
+        </p>
+    </div>
+`;
 
-var parserConfig = {
-    replace: function(domNode) {
-        var parsedChildren;
-        if (domNode.attribs) {
-            if (domNode.attribs.id === 'main') {
-                // continue parsing domNode's children with same config
-                parsedChildren = domToReact(domNode.children, parserConfig);
-                return React.createElement('span', {
-                    style: { fontSize: '42px' }
-                }, parsedChildren);
-                // equivalent jsx syntax:
-                // return <span style={{ fontSize: '42px' }}>{parsedChildren}</span>;
+// parser config
+const options = {
+    replace: (domNode) => {
+        // do not replace if element has no attributes
+        if (!domNode.attribs) return;
 
-            } else if (domNode.attribs.class === 'prettify') {
-                // continue parsing domNode's children with same config
-                parsedChildren = domToReact(domNode.children, parserConfig);
-                return React.createElement('span', {
-                    style: { color: 'hotpink' }
-                }, parsedChildren);
-                // equivalent jsx syntax:
-                // return <span style={{ color: 'hotpink' }}>{parsedChildren}</span>;
-            }
+        if (domNode.attribs.id === 'main') {
+            return (
+                <span style={{ fontSize: '42px' }}>
+                    {domToReact(domNode.children, options)}
+                </span>
+            );
+
+        } else if (domNode.attribs.class === 'prettify') {
+            return (
+                <span style={{ color: 'hotpink' }}>
+                    {domToReact(domNode.children, options)}
+                </span>
+            );
         }
@@ -182,15 +169,20 @@ }
 
-require('react-dom').render(
-    Parser(html, parserConfig),
+render(
+    Parser(html, options),
     document.getElementById('root')
 );
-// <div>
-//     <span style="font-size: 42px;">
-//         <span class="prettify" style="color: hotpink;">
-//             keep me and make me pretty!
-//         </span>
-//     </span>
-// </div>
 ```
 
+You will get the following:
+
+```html
+<div>
+    <span style="font-size: 42px;">
+        <span class="prettify" style="color: hotpink;">
+            keep me and make me pretty!
+        </span>
+    </span>
+</div>
+```
+
 ## Testing
@@ -197,0 +189,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 1 instance in 1 package

Improved metrics

Number of low supply chain risk alerts

1

decreased by-50%

Worsened metrics

Total package byte prevSize

84738

decreased by-1.8%

Number of package files

12

decreased by-7.69%

Lines of code

1894

decreased by-1.46%

Number of lines in readme file

199

decreased by-3.86%

No dependency changes