diff --git a/CHANGELOG.md b/CHANGELOG.md index e085d79d..691c9f9d 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -4,6 +4,13 @@ All notable changes to this project will be documented in this file. The format is based on [Keep a Changelog](http://keepachangelog.com) and this project adheres to [Semantic Versioning](http://semver.org). +## [Unreleased](https://github.com/remarkablemark/html-react-parser/compare/v0.3.6...HEAD) +### Added +- [react-dom-core](https://github.com/remarkablemark/react-dom-core) to dependencies (closes #43) + - `react-dom` 16 no longer exposes `lib`, which includes the DOM property configs + - Upgrade devDependencies of `react` and `react-dom` to 16 + - Update README and examples + ## [0.3.6](https://github.com/remarkablemark/html-react-parser/compare/v0.3.5...v0.3.6) - 2017-09-30 ### Changed - Dependencies diff --git a/README.md b/README.md index 9325cb06..6f055ac9 100644 --- a/README.md +++ b/README.md @@ -17,7 +17,7 @@ The parser converts an HTML string to [React Element(s)](https://facebook.github There is also an option to [replace](#replacedomnode) element(s) with your own React Element(s) via the [parser options](#options). -#### Example +## Example ```js var Parser = require('html-react-parser'); @@ -32,37 +32,36 @@ Parser('

Hello, world!

'); [NPM](https://www.npmjs.com/package/html-react-parser): ```sh -$ npm install html-react-parser +npm install html-react-parser --save ``` -Or if you're using react <15.4: +[Yarn](https://yarn.fyi/html-react-parser): ```sh -$ npm install html-react-parser@0.2 +yarn add html-react-parser ``` [CDN](https://unpkg.com/html-react-parser/): ```html - - - + + ``` -See more [examples](https://github.com/remarkablemark/html-react-parser/tree/master/examples). +See [examples](https://github.com/remarkablemark/html-react-parser/tree/master/examples). ## Usage -Given that you have the following required: +Given that you have the following imported: ```js -// ES6 +// ES Modules import Parser from 'html-react-parser'; import { render } from 'react-dom'; ``` -You may render one element: +You can render an element: ```js render( @@ -71,7 +70,7 @@ render( ); ``` -You may render adjacent elements: +You can render multiple elements: ```js // with JSX @@ -93,7 +92,7 @@ render( ); ``` -You may render nested elements: +You can render nested elements: ```js render( @@ -117,7 +116,7 @@ render( The `replace` method allows you to swap an element with your own React Element. -The first argument is `domNode`, which is an object that has the same output as [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. @@ -137,7 +136,7 @@ Advanced example (keep the replaced children): ```js // with ES6 and JSX -// converts dom object to React Elements +// converts DOM object to React Elements import domToReact from 'html-react-parser/lib/dom-to-react'; const html = ` @@ -150,8 +149,7 @@ const html = ` `; -// parser config -const options = { +const parserOptions = { replace: (domNode) => { // do not replace if element has no attributes if (!domNode.attribs) return; @@ -174,12 +172,12 @@ const options = { }; render( - Parser(html, options), + Parser(html, parserOptions), document.getElementById('root') ); ``` -You will get the following: +It will output the following: ```html
@@ -200,8 +198,9 @@ $ npm run lint ## Special Thanks -- [html-dom-parser](https://github.com/remarkablemark/html-dom-parser) - [Contributors](https://github.com/remarkablemark/html-react-parser/graphs/contributors) +- [html-dom-parser](https://github.com/remarkablemark/html-dom-parser) +- [react-dom-core](https://github.com/remarkablemark/react-dom-core) ## License diff --git a/examples/requirejs.html b/examples/requirejs.html index 6ee9467e..dc57adbd 100644 --- a/examples/requirejs.html +++ b/examples/requirejs.html @@ -8,14 +8,14 @@
- + - + + + + + ", + "complex": "Title
Header

Heading


Paragraph

Some text.
", "textarea": "", "script": "", "style": "",