html-to-react-components-es6
v1.6.0
Published
Extract annotated portions of HTML into React components as separate modules
Maintainers
young_springReadme
Extract annotated portions of HTML into React components as separate modules. The structure of HTML is preserved by importing child components and replacing appropriate pieces of HTML with them. As a result you get an entire components tree ready to be rendered.
Installation
$ npm i -g html-to-react-components-es6Usage
HTML components should be annotated with data-component attribute. The value of the attribute is the name of the React component.
See and run node try.js for usage example and output.
CLI
$ html2react ./src/*.htmlAPI
import htmlToReact from 'html-to-react-components-es6';
var components = htmlToReact(
`<!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"></li>
<li class="list-item" data-component="ListItem"></li>
</ul>
</nav>
</header>
</body>
</html>
`);
console.log(Object.keys(components))
/*
["Header", "Heading", "ListItem", "Nav"]
*/
console.log(components['Header'])
/*
import React from 'react';
import Heading from './heading';
import Nav from './nav';
class Header extends React.Component {
render() {
return (
<header className="header">
<Heading></Heading>
<Nav></Nav>
</header>
);
}
}
*/Options
toFiles, -f
Wether write to file or not.
Default is true for cli and false for api.
outputPath, -p
Output directory. (only useful when outputType is file)
Default is components directory in the current directory.
extension, -e
Output files extension. (only useful when outputType is file)
Default is jsx.