{"repo":"roman01la/html-to-react-components","free":true,"listed":false,"github":"https://github.com/roman01la/html-to-react-components","clone":"git clone https://github.com/roman01la/html-to-react-components.git","description":"Converts HTML pages into React components","language":"JavaScript","stars":2178,"topics":["react","jsx","html","html-to-jsx","html-to-react","html2jsx","html2react"],"license":"MIT","category":"cli-tools","readme_excerpt":"If you like what I do, consider supporting my work via donation 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. Output is TypeScript by default — components with public: props get typed interfaces and annotated parameters. Try in online REPL Contents - When to use it - Installation - Usage - CLI - Options - Node.js API - Building for browser - Resources - Ecosystem - Contributing - 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 Requires Node.js 18 or later. 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. By default, components with public: props are generated with TypeScript interfaces: See and run test.js file for usage example and output. CLI 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: Options c","default_branch":null,"files":null,"tree":[],"storefront":"/r/roman01la","claimed":false,"request_supported":{"post":"https://gitbuyer.com/r/roman01la/html-to-react-components/request-supported","requests":0},"note":"indexed from public GitHub; nothing is for sale on this page. Clone it from GitHub. Paid listings live at /search."}