Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
html-react-parser
Advanced tools
html-react-parser - npm Package Compare versions
Comparing version 0.6.1 to 0.6.2
@@ -5,2 +5,7 @@ # Change Log | ||
| <a name="0.6.2"></a> | ||
| ## [0.6.2](https://github.com/remarkablemark/html-react-parser/compare/v0.6.1...v0.6.2) (2019-03-07) | ||
| <a name="0.6.1"></a> | ||
@@ -7,0 +12,0 @@ ## [0.6.1](https://github.com/remarkablemark/html-react-parser/compare/v0.6.0...v0.6.1) (2019-01-03) |
| { | ||
| "name": "html-react-parser", | ||
| "version": "0.6.1", | ||
| "version": "0.6.2", | ||
| "description": "An HTML to React parser.", | ||
@@ -37,3 +37,3 @@ "author": "Mark <mark@remarkablemark.org>", | ||
| "html-dom-parser": "0.1.3", | ||
| "react-dom-core": "0.0.3", | ||
| "react-dom-core": "0.0.4", | ||
| "style-to-object": "0.2.2" | ||
@@ -40,0 +40,0 @@ }, |
160
README.md
@@ -10,3 +10,4 @@ # html-react-parser | ||
| An HTML to React parser that works on the server and the browser: | ||
| An HTML to React parser that works on both the server and the browser: | ||
| ``` | ||
@@ -16,19 +17,19 @@ HTMLReactParser(htmlString[, options]) | ||
| It converts an HTML string to [React elements](https://facebook.github.io/react/docs/react-api.html#creating-react-elements). | ||
| The parser converts an HTML string to [React element(s)](https://reactjs.org/docs/react-api.html#creating-react-elements). If you want to [replace an element](#replacedomnode) with your own custom element, there's an [option](#options) to do that. | ||
| There's also an [option](#options) to [replace](#replacedomnode) elements with your own custom React elements. | ||
| Example: | ||
| ## Example | ||
| ```js | ||
| var Parser = require('html-react-parser'); | ||
| Parser('<p>Hello, world!</p>'); | ||
| // same output as `React.createElement('p', {}, 'Hello, world!')` | ||
| var parse = require('html-react-parser'); | ||
| parse('<div>text</div>'); // equivalent to `React.createElement('div', {}, 'text')` | ||
| ``` | ||
| [JSFiddle](https://jsfiddle.net/remarkablemark/7v86d800/) | [repl.it](https://repl.it/@remarkablemark/html-react-parser) | ||
| [CodeSandbox](https://codesandbox.io/s/940pov1l4w) | [JSFiddle](https://jsfiddle.net/remarkablemark/7v86d800/) | [repl.it](https://repl.it/@remarkablemark/html-react-parser) | ||
| See [usage](#usage) and more [examples](https://github.com/remarkablemark/html-react-parser/tree/master/examples). | ||
| ## Installation | ||
| [NPM](https://www.npmjs.com/package/html-react-parser): | ||
| ```sh | ||
@@ -38,3 +39,4 @@ $ npm install html-react-parser --save | ||
| [Yarn](https://yarn.fyi/html-react-parser): | ||
| [Yarn](https://yarnpkg.com/package/html-react-parser): | ||
| ```sh | ||
@@ -44,3 +46,4 @@ $ yarn add html-react-parser | ||
| [CDN](https://unpkg.com/html-react-parser/): | ||
| [unpkg](https://unpkg.com/html-react-parser/) (CDN): | ||
| ```html | ||
@@ -55,52 +58,46 @@ <!-- HTMLReactParser depends on React --> | ||
| See more [examples](https://github.com/remarkablemark/html-react-parser/tree/master/examples). | ||
| ## Usage | ||
| Given you have the following imported: | ||
| Given you have `html-react-parser` imported: | ||
| ```js | ||
| // ES Modules | ||
| import Parser from 'html-react-parser'; | ||
| import { render } from 'react-dom'; | ||
| import parse from 'html-react-parser'; | ||
| ``` | ||
| Render a single element: | ||
| Parse single element: | ||
| ```js | ||
| render( | ||
| Parser('<h1>single</h1>'), | ||
| document.getElementById('root') | ||
| ); | ||
| parse('<h1>single</h1>'); | ||
| ``` | ||
| Render multiple elements: | ||
| Parse multiple elements: | ||
| ```js | ||
| // with JSX | ||
| render( | ||
| // the parser returns an array for adjacent elements | ||
| // so make sure they're nested under a parent React element | ||
| <div>{Parser('<p>brother</p><p>sister</p>')}</div>, | ||
| document.getElementById('root') | ||
| ); | ||
| parse('<p>sibling 1</p><p>sibling 2</p>'); | ||
| ``` | ||
| // or without JSX | ||
| render( | ||
| React.createElement('div', {}, Parser('<p>brother</p><p>sister</p>')), | ||
| document.getElementById('root') | ||
| ); | ||
| Because the parser returns an array for adjacent elements, make sure it's nested under a parent element when rendered: | ||
| ```jsx | ||
| import React, { Component } from 'react'; | ||
| import parse from 'html-react-parser'; | ||
| class App extends Component { | ||
| render() { | ||
| return <div>{parse('<p>sibling 1</p><p>sibling 2</p>')}</div>; | ||
| } | ||
| } | ||
| ``` | ||
| Render nested elements: | ||
| Parse nested elements: | ||
| ```js | ||
| render( | ||
| Parser('<ul><li>inside</li></ul>'), | ||
| document.getElementById('root') | ||
| ); | ||
| parse('<ul><li>text</li></ul>'); | ||
| ``` | ||
| Renders with attributes preserved: | ||
| Parse element with attributes: | ||
| ```js | ||
| render( | ||
| Parser('<p id="foo" class="bar baz" data-qux="42">look at me now</p>'), | ||
| document.getElementById('root') | ||
| ); | ||
| parse('<hr id="foo" class="bar" data-baz="qux">'); | ||
| ``` | ||
@@ -114,3 +111,3 @@ | ||
| The first argument is `domNode`--an object with the same output as [htmlparser2](https://github.com/fb55/htmlparser2)'s [domhandler](https://github.com/fb55/domhandler#example). | ||
| The first argument is `domNode`―an object with the same output as [htmlparser2](https://github.com/fb55/htmlparser2)'s [domhandler](https://github.com/fb55/domhandler#example). | ||
@@ -120,3 +117,3 @@ The element is replaced only if a valid React element is returned. | ||
| ```js | ||
| Parser('<p id="replace">text</p>', { | ||
| parse('<p id="replace">text</p>', { | ||
| replace: function(domNode) { | ||
@@ -130,8 +127,12 @@ if (domNode.attribs && domNode.attribs.id === 'replace') { | ||
| Here's an [example](https://repl.it/@remarkablemark/html-react-parser-replace-example) of using `replace` to modify the children: | ||
| The following [example](https://repl.it/@remarkablemark/html-react-parser-replace-example) uses `replace` to modify the children: | ||
| ```jsx | ||
| // with ES6 and JSX | ||
| import React from 'react'; | ||
| import { renderToStaticMarkup } from 'react-dom/server'; | ||
| import parse from 'html-react-parser'; | ||
| import domToReact from 'html-react-parser/lib/dom-to-react'; | ||
| const htmlString = ` | ||
| const elements = parse( | ||
| ` | ||
| <p id="main"> | ||
@@ -142,45 +143,41 @@ <span class="prettify"> | ||
| </p> | ||
| `; | ||
| `, | ||
| { | ||
| replace: ({ attribs, children }) => { | ||
| if (!attribs) return; | ||
| const parserOptions = { | ||
| replace: ({ attribs, children }) => { | ||
| if (!attribs) return; | ||
| if (attribs.id === 'main') { | ||
| return ( | ||
| <h1 style={{ fontSize: 42 }}> | ||
| {domToReact(children, parserOptions)} | ||
| </h1> | ||
| ); | ||
| } else if (attribs.class === 'prettify') { | ||
| return ( | ||
| <span style={{ color: 'hotpink' }}> | ||
| {domToReact(children, parserOptions)} | ||
| </span> | ||
| ); | ||
| if (attribs.id === 'main') { | ||
| return ( | ||
| <h1 style={{ fontSize: 42 }}> | ||
| {domToReact(children, parserOptions)} | ||
| </h1> | ||
| ); | ||
| } else if (attribs.class === 'prettify') { | ||
| return ( | ||
| <span style={{ color: 'hotpink' }}> | ||
| {domToReact(children, parserOptions)} | ||
| </span> | ||
| ); | ||
| } | ||
| } | ||
| } | ||
| }; | ||
| ); | ||
| const reactElement = Parser(htmlString, parserOptions); | ||
| ReactDOMServer.renderToStaticMarkup(reactElement); | ||
| console.log(renderToStaticMarkup(elements)); | ||
| ``` | ||
| [Output](https://repl.it/@remarkablemark/html-react-parser-replace-example): | ||
| The 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> | ||
| ``` | ||
| Here's an [example](https://repl.it/@remarkablemark/html-react-parser-issue-56) of using `replace` to exclude an element: | ||
| ```js | ||
| Parser('<p><br id="remove"></p>', { | ||
| replace: ({ attribs }) => { | ||
| if (attribs && attribs.id === 'remove') { | ||
| return React.createElement(React.Fragment); | ||
| } | ||
| }, | ||
| The following [example](https://repl.it/@remarkablemark/html-react-parser-issue-56) uses `replace` to exclude an element: | ||
| ```jsx | ||
| parse('<p><br id="remove"></p>', { | ||
| replace: ({ attribs }) => | ||
| attribs && attribs.id === 'remove' && <React.Fragment /> | ||
| }); | ||
@@ -203,2 +200,3 @@ ``` | ||
| Here's an example output of the benchmarks run on a MacBook Pro 2017: | ||
| ``` | ||
@@ -205,0 +203,0 @@ html-to-react - Single x 415,186 ops/sec ±0.92% (85 runs sampled) |
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Worsened metrics
- Total package byte prevSize
- decreased by-0.02%
121364
- Number of lines in readme file
- decreased by-0.92%
216
Dependency changes
+ Addedreact-dom-core@0.0.4(transitive)
- Removedreact-dom-core@0.0.3(transitive)
Updatedreact-dom-core@0.0.4