Merge pull request #21 from remarkablemark/chore-readme

Tidy and reword README for readability and add contributors

Author: remarkablemark

README.md

@@ -20,7 +20,7 @@ The parser converts an HTML string to [React element(s)](https://facebook.github
 ```js
 var Parser = require('html-react-parser');
 var reactElement = (
-    Parser('<p>Hello, world!</p>') // equivalent to `React.createElement('p', {}, 'Hello, world!')`
+    Parser('<p>Hello, world!</p>') // same as `React.createElement('p', {}, 'Hello, world!')`
 );
 require('react-dom').render(reactElement, document.getElementById('root'));
 ```
@@ -72,8 +72,7 @@ ReactDOM.render(
 
 The `replace` method allows you to swap an element with your own React element.
 
-The method has 1 parameter:
-1. `domNode`: 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 which shares the same schema as the output from [htmlparser2.parseDOM](https://github.com/fb55/domhandler#example).
 
 ```js
 Parser('<p id="replace">text</p>', {
@@ -94,52 +93,78 @@ Parser('<p id="replace">text</p>', {
 });
 ```
 
-Working example:
+Simple example:
 
 ```js
 var Parser = require('html-react-parser');
 var React = require('react');
 
-var html = '<div><p id="main">replace me</p></div>';
+var html = (
+    '<div>' +
+        '<p id="replace">'
+            'replace me' +
+        '</p>' +
+    '</div>'
+);
 
 var reactElement = Parser(html, {
     replace: function(domNode) {
-        if (domNode.attribs && domNode.attribs.id === 'main') {
+        if (domNode.attribs && domNode.attribs.id === 'replace') {
             return React.createElement('span', {
-                style: { fontSize: '42px' } },
-            'replaced!');
+                style: { fontSize: '42px' }
+            }, 'replaced!');
             // equivalent jsx syntax:
             // return <span style={{ fontSize: '42px' }}>replaced!</span>;
         }
     }
 });
 
-require('react-dom').render(reactElement, document.getElementById('root'));
-// <div><span style="font-size: 42px;">replaced!</span></div>
+require('react-dom').render(
+    reactElement,
+    document.getElementById('root')
+);
+// <div>
+//     <span style="font-size: 42px;">
+//         replaced!
+//     </span>
+// </div>
 ```
 
-Advanced usage with replace, keeping children (useful if child elements also needs to be replaced or just kept):
+Advanced example (the replaced element's children are kept):
 
 ```js
 var Parser = require('html-react-parser');
-var domToReact = require('html-react-parser/lib/dom-to-react'); // used for recursively parsing DOM created from the HTML
 var React = require('react');
 
-var html = '<div><p id="main"><span class="prettify">keep me and make me pretty!</span></p></div>';
+// used for recursively parsing DOM created from the HTML
+var domToReact = require('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>'
+);
 
 var parserConfig = {
     replace: function(domNode) {
         var parsedChildren;
         if (domNode.attribs) {
             if (domNode.attribs.id === 'main') {
-                parsedChildren = domToReact(domNode.children, parserConfig); // continue parsing domNode's children with same config
+                // 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>;
+
             } else if (domNode.attribs.class === 'prettify') {
-                parsedChildren = domToReact(domNode.children, parserConfig); // continue parsing domNode's children with same config
+                // continue parsing domNode's children with same config
+                parsedChildren = domToReact(domNode.children, parserConfig);
                 return React.createElement('span', {
                     style: { color: 'hotpink' }
                 }, parsedChildren);
@@ -150,21 +175,31 @@ var parserConfig = {
     }
 };
 
-var reactElement = Parser(html, parserConfig);
-
-require('react-dom').render(reactElement, document.getElementById('root'));
-// <div><span style="font-size: 42px;"><span class="prettify" style="color: hotpink;">keep me and make me pretty!</span></span></div>
+require('react-dom').render(
+    Parser(html, parserConfig),
+    document.getElementById('root')
+);
+// <div>
+//     <span style="font-size: 42px;">
+//         <span class="prettify" style="color: hotpink;">
+//             keep me and make me pretty!
+//         </span>
+//     </span>
+// </div>
 ```
 
 ## Testing
 
 ```sh
 $ npm test
+$ npm run lint
 ```
 
 ## Special Thanks
 
-To [benox3](https://github.com/benox3) and [tdlm](https://github.com/tdlm) for their feedback and review.
+- To [htmlparser2](https://github.com/fb55/htmlparser2).
+- To all the [contributors](https://github.com/remarkablemark/html-react-parser/graphs/contributors).
+- To [benox3](https://github.com/benox3) and [tdlm](https://github.com/tdlm) for their feedback and review.
 
 ## License