Extract annotated portions of HTML into React components as separate modules
Last updated 4 years ago by young_spring .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install html-to-react-components-es6 
SYNC missed versions from official npm registry.

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.


$ npm i -g html-to-react-components-es6


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.


$ html2react ./src/*.html


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

var components = htmlToReact(
`<!DOCTYPE html>
<html lang="en">
  <meta charset="UTF-8">

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



["Header", "Heading", "ListItem", "Nav"]

import React from 'react';
import Heading from './heading';
import Nav from './nav';

class Header extends React.Component {
  render() {
    return (
      <header className="header">


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.

Current Tags

  • 1.6.0                                ...           latest (4 years ago)

2 Versions

  • 1.6.0                                ...           4 years ago
  • 1.4.0                                ...           4 years ago
Maintainers (1)
Today 0
This Week 0
This Month 0
Last Day 0
Last Week 0
Last Month 0
Dependencies (18)
Dev Dependencies (4)
Dependents (2)

Copyright 2014 - 2017 © |