html-to-react
Advanced tools
Comparing version
@@ -39,5 +39,5 @@ 'use strict'; | ||
]); | ||
} else { | ||
return processingInstruction.processNode(node, children, index); | ||
} | ||
return processingInstruction.processNode(node, children, index); | ||
} else { | ||
@@ -44,0 +44,0 @@ return false; |
'use strict'; | ||
var camelize = require('underscore.string.fp/camelize'); | ||
var camelCase = require('lodash.camelcase'); | ||
var toPairs = require('ramda/src/toPairs'); | ||
@@ -25,3 +25,3 @@ var reduce = require('ramda/src/reduce'); | ||
if (key != null && value != null && key.length > 0 && value.length > 0) { | ||
jsonStyles[camelize(key)] = value; | ||
jsonStyles[camelCase(key)] = value; | ||
} | ||
@@ -28,0 +28,0 @@ } |
{ | ||
"name": "html-to-react", | ||
"version": "1.3.3", | ||
"version": "1.3.4", | ||
"description": "A lightweight library that converts raw HTML to a React DOM structure.", | ||
@@ -38,7 +38,7 @@ "main": "index.js", | ||
"dependencies": { | ||
"domhandler": "^2.3.0", | ||
"domhandler": "^2.4.2", | ||
"escape-string-regexp": "^1.0.5", | ||
"htmlparser2": "^3.8.3", | ||
"ramda": "^0.25.0", | ||
"underscore.string.fp": "^1.0.4" | ||
"htmlparser2": "^3.10.0", | ||
"lodash.camelcase": "^4.3.0", | ||
"ramda": "^0.26" | ||
}, | ||
@@ -49,10 +49,10 @@ "peerDependencies": { | ||
"devDependencies": { | ||
"coveralls": "^3.0", | ||
"eslint": "^4.8.0", | ||
"coveralls": "^3.0.2", | ||
"eslint": "^5.9.0", | ||
"istanbul": "^0.4", | ||
"mocha": "^4.0.1", | ||
"mocha": "^5.2.0", | ||
"mocha-lcov-reporter": "^1.2.0", | ||
"react": "^16.0", | ||
"react-dom": "^16.0" | ||
"react": "^16.6.3", | ||
"react-dom": "^16.6.3" | ||
} | ||
} |
106
README.md
@@ -18,12 +18,12 @@ # html-to-react | ||
<div class="row"> | ||
<div class="col-sm-6"> | ||
<div data-report-id="report-1"> | ||
<!-- A React component for report-1 --> | ||
</div> | ||
<div class="col-sm-6"> | ||
<div data-report-id="report-1"> | ||
<!-- A React component for report-1 --> | ||
</div> | ||
<div class="col-sm-6"> | ||
<div data-report-id="report-2"> | ||
<!-- A React component for report-2 --> | ||
</div> | ||
</div> | ||
<div class="col-sm-6"> | ||
<div data-report-id="report-2"> | ||
<!-- A React component for report-2 --> | ||
</div> | ||
</div> | ||
</div> | ||
@@ -77,3 +77,3 @@ ``` | ||
var isValidNode = function () { | ||
return true; | ||
return true; | ||
}; | ||
@@ -84,17 +84,19 @@ | ||
var processingInstructions = [ | ||
{ | ||
// Custom <h1> processing | ||
shouldProcessNode: function (node) { | ||
return node.parent && node.parent.name && node.parent.name === 'h1'; | ||
}, | ||
processNode: function (node, children) { | ||
return node.data.toUpperCase(); | ||
} | ||
}, { | ||
// Anything else | ||
shouldProcessNode: function (node) { | ||
return true; | ||
}, | ||
processNode: processNodeDefinitions.processDefaultNode | ||
}]; | ||
{ | ||
// Custom <h1> processing | ||
shouldProcessNode: function (node) { | ||
return node.parent && node.parent.name && node.parent.name === 'h1'; | ||
}, | ||
processNode: function (node, children) { | ||
return node.data.toUpperCase(); | ||
} | ||
}, | ||
{ | ||
// Anything else | ||
shouldProcessNode: function (node) { | ||
return true; | ||
}, | ||
processNode: processNodeDefinitions.processDefaultNode | ||
} | ||
]; | ||
var htmlToReactParser = new HtmlToReactParser(); | ||
@@ -121,8 +123,8 @@ var reactComponent = htmlToReactParser.parseWithInstructions(htmlInput, isValidNode, | ||
<div class="row"> | ||
<div class="col-sm-6"> | ||
<div data-container="wysiwyg"> | ||
<h1>Sample Heading</h1> | ||
<p>Sample Text</p> | ||
</div> | ||
<div class="col-sm-6"> | ||
<div data-container="wysiwyg"> | ||
<h1>Sample Heading</h1> | ||
<p>Sample Text</p> | ||
</div> | ||
</div> | ||
</div> | ||
@@ -138,7 +140,7 @@ ``` | ||
<div class="row"> | ||
<div class="col-sm-6"> | ||
<div data-container="wysiwyg"> | ||
<RichTextEditor html={"<h1>Sample heading</h1><p>Sample Text</p>"} /> | ||
</div> | ||
<div class="col-sm-6"> | ||
<div data-container="wysiwyg"> | ||
<RichTextEditor html={"<h1>Sample heading</h1><p>Sample Text</p>"} /> | ||
</div> | ||
</div> | ||
</div> | ||
@@ -161,3 +163,3 @@ ``` | ||
var isValidNode = function () { | ||
return true; | ||
return true; | ||
}; | ||
@@ -170,24 +172,24 @@ | ||
var processingInstructions = [ | ||
{ | ||
// This is REQUIRED, it tells the parser | ||
// that we want to insert our React | ||
// component as a child | ||
replaceChildren: true, | ||
shouldProcessNode: function (node) { | ||
return node.attribs && node.attribs['data-test'] === 'foo'; | ||
}, | ||
processNode: function (node, children, index) { | ||
return React.createElement('h1', {key: index,}, 'Heading'); | ||
} | ||
{ | ||
// This is REQUIRED, it tells the parser | ||
// that we want to insert our React | ||
// component as a child | ||
replaceChildren: true, | ||
shouldProcessNode: function (node) { | ||
return node.attribs && node.attribs['data-test'] === 'foo'; | ||
}, | ||
{ | ||
// Anything else | ||
shouldProcessNode: function (node) { | ||
return true; | ||
}, | ||
processNode: processNodeDefinitions.processDefaultNode, | ||
processNode: function (node, children, index) { | ||
return React.createElement('h1', {key: index,}, 'Heading'); | ||
} | ||
}, | ||
{ | ||
// Anything else | ||
shouldProcessNode: function (node) { | ||
return true; | ||
}, | ||
processNode: processNodeDefinitions.processDefaultNode, | ||
}, | ||
]; | ||
var reactComponent = parser.parseWithInstructions( | ||
var reactComponent = htmlToReactParser.parseWithInstructions( | ||
htmlInput, isValidNode, processingInstructions); | ||
@@ -194,0 +196,0 @@ var reactHtml = ReactDOMServer.renderToStaticMarkup( |
@@ -339,3 +339,3 @@ 'use strict'; | ||
it('should replace the children of an element', function () { | ||
it('should replace the children of an element if configured so', function () { | ||
var htmlInput = '<div><div data-test="foo"><p>Text</p><p>Text</p></div></div>'; | ||
@@ -342,0 +342,0 @@ var htmlExpected = '<div><div data-test="foo"><h1>Heading</h1></div></div>'; |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
628
0.16%201
1.01%48461
-0.34%+ Added
+ Added
+ Added
- Removed
- Removed
- Removed
- Removed
- Removed
- Removed
- Removed
- Removed
Updated
Updated
Updated