html-to-react-components
html-to-react-components copied to clipboard
Published
20 hours ago •
roman01la
roman01la
Functional option doesn't work
I tried the example from the README for Node API and it seems to only return class components. This is the example:
const extractReactComponents = require("html-to-react-components");
extractReactComponents(
`<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<header class="header" data-component="Header">
<h1 class="heading" data-component="Heading">Hello, world!</h1>
<nav class="nav" data-component="Nav">
<ul class="list">
<li class="list-item" data-component="ListItem">#1</li>
<li class="list-item" data-component="ListItem">#2</li>
</ul>
</nav>
</header>
</body>
</html>
`,
{
componentType: "functional",
moduleType: false,
}
);
/*
{ Header: 'const Header = () => <header className="header">\n\n <Heading></Heading>\n\n <Nav></Nav>\n\n </header>;',
Heading: 'const Heading = () => <h1 className="heading">Hello, world!</h1>;',
Nav: 'const Nav = () => <nav className="nav">\n <ul className="list">\n <ListItem></ListItem>\n <ListItem></ListItem>\n </ul>\n </nav>;',
ListItem: 'const ListItem = () => <li className="list-item">#2</li>;' }
*/
When I run it in a completely new Node environment without anything else installed, this is what it outputs:
{
Header: 'import React from "react";\n' +
'import Heading from "./Heading";\n' +
'import Nav from "./Nav";\n' +
'\n' +
'class Header extends React.Component {\n' +
' render() {\n' +
' return (\n' +
' <header className="header">\n' +
' <Heading></Heading>\n' +
' <Nav></Nav>\n' +
' </header>\n' +
' );\n' +
' }\n' +
'}\n' +
'\n' +
'export default Header;\n',
Heading: 'import React from "react";\n' +
'\n' +
'class Heading extends React.Component {\n' +
' render() {\n' +
' return <h1 className="heading">Hello, world!</h1>;\n' +
' }\n' +
'}\n' +
'\n' +
'export default Heading;\n',
Nav: 'import React from "react";\n' +
'import ListItem from "./ListItem";\n' +
'\n' +
'class Nav extends React.Component {\n' +
' render() {\n' +
' return (\n' +
' <nav className="nav">\n' +
' <ul className="list">\n' +
' <ListItem></ListItem>\n' +
' <ListItem></ListItem>\n' +
' </ul>\n' +
' </nav>\n' +
' );\n' +
' }\n' +
'}\n' +
'\n' +
'export default Nav;\n',
ListItem: 'import React from "react";\n' +
'\n' +
'class ListItem extends React.Component {\n' +
' render() {\n' +
' return <li className="list-item">#1</li>;\n' +
' }\n' +
'}\n' +
'\n' +
'export default ListItem;\n'
}
