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.

$3

`
$ html2react ./src/*.html
`

$3

`js
import htmlToReact from 'html-to-react-components-es6';

var components = htmlToReact(


Hello, world!

);

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 (








);
}
}
*/
`

Options

$3

Wether write to file or not.

Default is true for cli and false for api.

$3

Output directory. (only useful when outputType is file)

Default is components directory in the current directory.

$3

Output files extension. (only useful when outputType is file)

Default is jsx`.