html2react

A powerful utility that transforms HTML files into fully functional React components with proper JSX syntax.

📋 Table of Contents

• Overview
• Features
• Installation
• Usage
  • CLI Mode
  • API Usage
• Conversion Features
• Examples
• Contributing
• License

🔍 Overview

html2react is a Node.js tool that simplifies the process of migrating traditional HTML to React components. Whether you're transitioning a legacy project to React or quickly prototyping components from existing HTML, this converter handles the complex transformation process for you.

The tool intelligently converts HTML attributes to their JSX counterparts, processes inline styles, manages form elements correctly, and creates a clean, ready-to-use React component.

✨ Features

• Intelligent Attribute Conversion: Automatically transforms HTML attributes to their JSX equivalents (class → className, etc.)
• Style Parsing: Converts inline CSS to React style objects with proper camelCase properties
• Form Element Handling: Sets defaultValue and defaultChecked for uncontrolled components
• SVG Support: Provides special handling for SVG elements and attributes
• Self-closing Tag Management: Properly formats self-closing tags like <img> and <input>
• Script Tag Options: Choose to remove script tags or convert them to comments
• Pretty Formatting: Outputs beautifully formatted code using Prettier
• Interactive CLI: Easy-to-use command line interface with guided prompts
• Programmatic API: Integration-ready API for use in your own applications

📦 Installation

# Clone the repository
git clone https://github.com/omidpanah/html2react.git
cd html2react

# Install dependencies
npm install

# Make the CLI executable (optional)
chmod +x html-to-react.js

🚀 Usage

CLI Mode

Run the converter interactively with prompts for file selection and configuration:

node html-to-react.js

The CLI will guide you through:

1. Selecting the HTML file to convert
2. Naming your React component
3. Choosing how to handle script tags
4. Saving the output to a .jsx file

API Usage

You can also use the tool programmatically in your own Node.js applications:

const { convertToReactComponent, convertToJSX } = require('html2react');

// Convert HTML string to a full React component
const html = '<div class="container"><h1>Hello World</h1></div>';
const reactComponent = convertToReactComponent(html, 'HelloWorld', {
  removeScripts: true
});
console.log(reactComponent);

// Or convert HTML to JSX only
const jsxOnly = convertToJSX(html, { removeScripts: true });
console.log(jsxOnly);

🔄 Conversion Features

The converter handles many intricate aspects of HTML to JSX conversion:

| HTML Feature | Conversion Action | |--------------|-------------------| | class attribute | Converts to className | | for attribute | Converts to htmlFor | | Inline styles | Parses to React style objects | | Event handlers | Adds placeholder functions | | Form elements | Adds appropriate default values | | Self-closing tags | Ensures proper JSX format with / | | Script tags | Optional removal or conversion to comments | | Selected options | Converts to defaultValue on parent <select> | | Numeric attributes | Converts strings to numbers when appropriate | | SVG attributes | Handles special case of kebab-case to camelCase |

📋 Examples

Input HTML

<div class="user-profile">
  <img src="avatar.png" alt="User Avatar" />
  <h2 class="username">JohnDoe</h2>
  <form class="profile-form">
    <input type="text" name="bio" value="Web Developer" />
    <input type="checkbox" name="available" checked />
    <button style="color: blue; font-weight: bold;">Update</button>
  </form>
</div>

Output React Component

import React from 'react';

function UserProfile() {
  return (
    <>
      <div className="user-profile">
        <img src="avatar.png" alt="User Avatar" />
        <h2 className="username">JohnDoe</h2>
        <form className="profile-form">
          <input type="text" name="bio" defaultValue="Web Developer" />
          <input type="checkbox" name="available" defaultChecked />
          <button style={{ color: "blue", fontWeight: "bold" }}>Update</button>
        </form>
      </div>
    </>
  );
}

export default UserProfile;

👥 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

---

<p align="center"> Made with ❤️ for the React community </p>