{"id":13422638,"url":"https://github.com/roman01la/html-to-react-components","last_synced_at":"2025-05-13T23:03:58.508Z","repository":{"id":40660061,"uuid":"48782360","full_name":"roman01la/html-to-react-components","owner":"roman01la","description":"Converts HTML pages into React components","archived":false,"fork":false,"pushed_at":"2024-11-24T07:09:24.000Z","size":5739,"stargazers_count":2133,"open_issues_count":11,"forks_count":135,"subscribers_count":31,"default_branch":"master","last_synced_at":"2025-04-30T12:16:56.700Z","etag":null,"topics":["html","html-to-jsx","html-to-react","html2jsx","html2react","jsx","react"],"latest_commit_sha":null,"homepage":"https://roman01la.github.io/html-to-react-components/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/roman01la.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":"roman01la","patreon":"roman01la"}},"created_at":"2015-12-30T04:48:08.000Z","updated_at":"2025-04-18T10:49:28.000Z","dependencies_parsed_at":"2024-06-18T18:36:58.819Z","dependency_job_id":"3ea22d95-a4a0-47d8-aedb-dd8a8884f5d3","html_url":"https://github.com/roman01la/html-to-react-components","commit_stats":{"total_commits":121,"total_committers":11,"mean_commits":11.0,"dds":"0.22314049586776863","last_synced_commit":"90695ccbd766b1c0f5d70ed86ca2ff55afa09c34"},"previous_names":[],"tags_count":22,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/roman01la%2Fhtml-to-react-components","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/roman01la%2Fhtml-to-react-components/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/roman01la%2Fhtml-to-react-components/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/roman01la%2Fhtml-to-react-components/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/roman01la","download_url":"https://codeload.github.com/roman01la/html-to-react-components/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254040396,"owners_count":22004529,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["html","html-to-jsx","html-to-react","html2jsx","html2react","jsx","react"],"created_at":"2024-07-30T23:00:49.185Z","updated_at":"2025-05-13T23:03:58.477Z","avatar_url":"https://github.com/roman01la.png","language":"JavaScript","readme":"\u003cimg src=\"logo.png\" width=\"260\" alt=\"Logo\" /\u003e\n\n\u003ca href=\"https://travis-ci.org/roman01la/html-to-react-components\"\u003e\n  \u003cimg src=\"https://img.shields.io/travis/roman01la/html-to-react-components.svg?style=flat-square\" /\u003e\n\u003c/a\u003e\n\u003ca href=\"https://www.npmjs.com/package/html-to-react-components\"\u003e\n  \u003cimg src=\"https://img.shields.io/npm/v/html-to-react-components.svg?style=flat-square\" /\u003e\n\u003c/a\u003e\n\u003ca href=\"https://coveralls.io/github/roman01la/html-to-react-components\"\u003e\n  \u003cimg src=\"https://img.shields.io/coveralls/roman01la/html-to-react-components.svg?style=flat-square\" /\u003e\n\u003c/a\u003e\n\n_If you like what I do, consider supporting my work via donation_\n\n[![](https://www.buymeacoffee.com/assets/img/guidelines/download-assets-sm-1.svg)](https://www.buymeacoffee.com/romanliutikov)\n\nExtract 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.\n\nTry in [online REPL](http://roman01la.github.io/html-to-react-components/repl/)\n\n![usage example animation](sample.gif)\n\n## Contents\n\n- [When to use it](#when-to-use-it)\n- [Installation](#installation)\n- [Usage](#usage)\n- [CLI](#cli)\n- [Options](#options)\n- [Node.js API](#nodejs-api)\n- [Building for browser](#building-for-browser)\n- [Resources](#resources)\n- [Ecosystem](#ecosystem)\n- [Contributing](#contributing)\n- [License](#License)\n\n## When to use it\n\nThis utility was designed to free React developers from a boring task of translating HTML into components.\n\nImagine 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!\n\n## Installation\n\n```\n$ npm i -g html-to-react-components\n```\n\n## Usage\n\nHTML element with `data-component` attribute will be converted into separate React components. The value of the attribute is the name of the React component.\n\nAdditionally specify which HTML attributes should be exposed as React props using `public:` prefix.\n\n```html\n\u003cinput public:type=\"text\" id=\"input\" data-component=\"Input\" /\u003e\n```\n\n```js\n// at usage place\n\u003cInput type=\"text\" /\u003e;\n// ----^^^^^^^^^^^\n\n// in component's module\nclass Input extends React.Component {\n  render() {\n    const { type } = this.props; // \u003c----\n    return \u003cinput type={type} id=\"input\" /\u003e;\n    // -----------^^^^^^^^^^^\n  }\n}\n```\n\nSee and run `test.js` file for usage example and output.\n\n## CLI\n\n```\n$ html2react \"./src/*.html\"\n```\n\nYou can also use any glob pattern to recursively generate the corresponding react file. Just make sure to use double quotes when specifying the pattern:\n\n```\n$ html2react \"./src/**/*.html\"\n```\n\n### Options\n\n#### componentType, --component, -c\n\nType of generated React components.\n\nValues:\n\n- `functional` (default)\n- `class`\n- `es5`\n\n#### moduleType, --module, -m\n\nType of generated JavaScript modules.\n\nValues:\n\n- `es` (EcmaScript module, default)\n- `cjs` (CommonJS)\n\n#### moduleFileNameDelimiter, --delimiter, -d\n\nDelimiter character to be used in modules filename.\n\nIf you don't specify a delimiter, or pass -d without a value, then the component\nname in the HTML will be used unchanged as the filename. If you do specify a\ndelimiter character, then the module name is broken into words, joined with the\ndelimiter and lower-cased.\n\n#### output\n\nConfiguration options for output to file system.\n\n##### path, --out, -o\n\nOutput directory path.\n\nDefault is `components` directory in the current directory.\n\n##### fileExtension, --ext, -e\n\nOutput files extension.\n\nDefault value is `js`.\n\n## Node.js API\n\n```js\nconst extractReactComponents = require(\"html-to-react-components\");\n\nextractReactComponents(\n  `\u003c!DOCTYPE html\u003e\n\u003chtml lang=\"en\"\u003e\n\u003chead\u003e\n  \u003cmeta charset=\"UTF-8\"\u003e\n  \u003ctitle\u003eDocument\u003c/title\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n\n  \u003cheader class=\"header\" data-component=\"Header\"\u003e\n\n    \u003ch1 class=\"heading\" data-component=\"Heading\"\u003eHello, world!\u003c/h1\u003e\n\n    \u003cnav class=\"nav\" data-component=\"Nav\"\u003e\n      \u003cul class=\"list\"\u003e\n        \u003cli class=\"list-item\" data-component=\"ListItem\"\u003e#1\u003c/li\u003e\n        \u003cli class=\"list-item\" data-component=\"ListItem\"\u003e#2\u003c/li\u003e\n      \u003c/ul\u003e\n    \u003c/nav\u003e\n\n  \u003c/header\u003e\n\n\u003c/body\u003e\n\u003c/html\u003e\n`,\n  {\n    componentType: \"functional\",\n    moduleType: false,\n  }\n);\n\n/*\n{ Header: 'const Header = () =\u003e \u003cheader className=\"header\"\u003e\\n\\n    \u003cHeading\u003e\u003c/Heading\u003e\\n\\n    \u003cNav\u003e\u003c/Nav\u003e\\n\\n  \u003c/header\u003e;',\n  Heading: 'const Heading = () =\u003e \u003ch1 className=\"heading\"\u003eHello, world!\u003c/h1\u003e;',\n  Nav: 'const Nav = () =\u003e \u003cnav className=\"nav\"\u003e\\n      \u003cul className=\"list\"\u003e\\n        \u003cListItem\u003e\u003c/ListItem\u003e\\n        \u003cListItem\u003e\u003c/ListItem\u003e\\n      \u003c/ul\u003e\\n    \u003c/nav\u003e;',\n  ListItem: 'const ListItem = () =\u003e \u003cli className=\"list-item\"\u003e#2\u003c/li\u003e;' }\n*/\n```\n\n## Building for browser\n\nWhen 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.\n\nExample of defining a var in Webpack config:\n\n```js\n  plugins: [\n    new webpack.DefinePlugin({\n      IN_BROWSER: JSON.stringify(true),\n    }),\n  ],\n```\n\n## Resources\n\nA 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.\n\nAnnotating 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.\n\n![usage example with DevTools animation](https://giant.gfycat.com/ShockingDefiantBobcat.gif)\n\n## Ecosystem\n\n- [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.\n\n## Contributing\n\nIf 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.\n\n## License\n\nMIT\n","funding_links":["https://github.com/sponsors/roman01la","https://patreon.com/roman01la","https://www.buymeacoffee.com/romanliutikov"],"categories":["Miscellaneous","JavaScript","Uncategorized"],"sub_categories":["Miscellaneous","Uncategorized"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Froman01la%2Fhtml-to-react-components","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Froman01la%2Fhtml-to-react-components","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Froman01la%2Fhtml-to-react-components/lists"}