html-to-react-components-es6

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-es6

Usage

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/*.html

API

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.