Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/roman01la/html-to-react-components

Converts HTML pages into React components
https://github.com/roman01la/html-to-react-components

html html-to-jsx html-to-react html2jsx html2react jsx react

Last synced: 28 days ago
JSON representation

Converts HTML pages into React components

Awesome Lists containing this project

README 

        
Logo





  





  





  




_If you like what I do, consider supporting my work via donation_



[![](https://www.buymeacoffee.com/assets/img/guidelines/download-assets-sm-1.svg)](https://www.buymeacoffee.com/romanliutikov)



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.



Try in [online REPL](http://roman01la.github.io/html-to-react-components/repl/)



![usage example animation](sample.gif)



## Contents



- [When to use it](#when-to-use-it)

- [Installation](#installation)

- [Usage](#usage)

- [CLI](#cli)

- [Options](#options)

- [Node.js API](#nodejs-api)

- [Building for browser](#building-for-browser)

- [Resources](#resources)

- [Ecosystem](#ecosystem)

- [Contributing](#contributing)

- [License](#License)



## When to use it



This utility was designed to free React developers from a boring task of translating HTML into components.



Imagine you just got a pile of HTML from your designers. The first thing you will do is break HTML into React components. This is boring and should be automated!



## Installation



```

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

```



## Usage



HTML element with `data-component` attribute will be converted into separate React components. The value of the attribute is the name of the React component.



Additionally specify which HTML attributes should be exposed as React props using `public:` prefix.



```html



```



```js

// at usage place

;

// ----^^^^^^^^^^^



// in component's module

class Input extends React.Component {

  render() {

    const { type } = this.props; // <----

    return ;

    // -----------^^^^^^^^^^^

  }

}

```



See and run `test.js` file for usage example and output.



## CLI



```

$ html2react "./src/*.html"

```



You can also use any glob pattern to recursively generate the corresponding react file. Just make sure to use double quotes when specifying the pattern:



```

$ html2react "./src/**/*.html"

```



### Options



#### componentType, --component, -c



Type of generated React components.



Values:



- `functional` (default)

- `class`

- `es5`



#### moduleType, --module, -m



Type of generated JavaScript modules.



Values:



- `es` (EcmaScript module, default)

- `cjs` (CommonJS)



#### moduleFileNameDelimiter, --delimiter, -d



Delimiter character to be used in modules filename.



If you don't specify a delimiter, or pass -d without a value, then the component

name in the HTML will be used unchanged as the filename. If you do specify a

delimiter character, then the module name is broken into words, joined with the

delimiter and lower-cased.



#### output



Configuration options for output to file system.



##### path, --out, -o



Output directory path.



Default is `components` directory in the current directory.



##### fileExtension, --ext, -e



Output files extension.



Default value is `js`.



## Node.js API



```js

const extractReactComponents = require("html-to-react-components");



extractReactComponents(

  `



  

  Document



  



    
Hello, world!



    

      
    

            
  • #1
    • 

            
  • #2
    • 

          


    



  



`,

  {

    componentType: "functional",

    moduleType: false,

  }

);



/*

{ Header: 'const Header = () => \n\n    \n\n    \n\n  ;',

  Heading: 'const Heading = () => 
Hello, world!
;',

  Nav: 'const Nav = () => \n      
    \n        \n        \n      
\n    ;',

  ListItem: 'const ListItem = () => 
  • #2
    • ;' }

    */

    ```
    


    ## Building for browser
    


    When building for in-browser usage an env variable `IN_BROWSER` is required to be set at compile time in order to disable Node.js-specific modules. Note that code formatting is not included in in-browser bundle.
    


    Example of defining a var in Webpack config:
    


    ```js

      plugins: [

        new webpack.DefinePlugin({

          IN_BROWSER: JSON.stringify(true),

        }),

      ],

    ```
    


    ## Resources
    


    A quick [video demo](https://www.youtube.com/embed/Cd8cNLfGcVo) on converting a simple HTML page into React components and rendering them into the same looking UI.
    


    Annotating HTML in the editor is not the best experience, because you cannot see rendered UI itself. It's possible to annotate HTML using DevTools. Be aware that you'll have to spend time on copying and pasting markup from DevTools into files which will be processed.
    


    ![usage example with DevTools animation](https://giant.gfycat.com/ShockingDefiantBobcat.gif)
    


    ## Ecosystem
    


    - [extract-to-react](https://github.com/jesstelford/extract-to-react) is an extension for Chrome and Chromium browsers built on top of _html-to-react-components_ which allows you to extract HTML and CSS into React components and load them in CodePen or JSFiddle.
    


    ## Contributing
    


    If you spotted a bug, please, submit a pull request with a bug fix. If you would like to add a feature or change existing behaviour, open an issue and tell about what exactly you want to change/add.
    


    ## License
    


    MIT