❤
npm
Sign UpSign In

html-to-react-components-es6

1.6.0 • Public • Published

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.

Readme

Keywords

Package Sidebar

Install

npm i html-to-react-components-es6

Repository

github.com/poetic/html-to-react-components-es6

Homepage

github.com/poetic/html-to-react-components-es6

Weekly Downloads

0

Version

1.6.0

License

MIT

Last publish

Collaborators

  • young_spring
Try on RunKit
Report malware