HTML to JSX Chrome Extension

📖 Overview

HTML to JSX Chrome Extension is a tool designed to simplify the conversion of HTML code into JSX, the syntax extension for JavaScript used in React. This extension allows developers to quickly convert HTML code to JSX, making their workflow more efficient and streamlined.

🎯 Purpose

The primary purpose of this extension is to help developers working with React by providing an easy-to-use tool that converts HTML to JSX. This is especially useful for those transitioning from HTML-based projects to React or for anyone needing to incorporate HTML code snippets into their React projects.

🚀 Features

Convert HTML to JSX easily.
Option to create a React functional component from the converted JSX.
Choose between default and named exports for the React component.
Option to wrap the component with React.memo for optimization.
Clear the input field with a single click.
Copy the converted JSX to clipboard with one click.
Responsive design with light and dark modes.

🛠️ Technologies and Libraries Used

React: For building the user interface.
TypeScript: For static type checking.
Vite: For fast and optimized development and build tooling.
Tailwind CSS: For styling the application.
react-hook-form: For managing form state and validation.
react-syntax-highlighter: For displaying the converted JSX with syntax highlighting.
Radix Icons: For icons used in the application.

📦 Installation

Clone the repository:

git clone https://github.com/birkankervan/html-to-jsx-chrome-extension.git
cd html-to-jsx-chrome-extension

Install the dependencies:
```
bun install
```
Build the project:
```
bun run build:chrome
```
Load the extension in Chrome:
- Open Chrome and navigate to chrome://extensions/.
- Enable "Developer mode" in the top right corner.
- Click "Load unpacked" and select the dist folder from your project directory.

📝 Usage

Open the extension by clicking the extension icon in the Chrome toolbar.
Enter your HTML code in the provided textarea.
Select options to create a React component, choose export type, and wrap with React.memo if desired.
Click "Convert to JSX" to see the converted JSX code.
Click the copy icon to copy the JSX code to your clipboard.
Use the clear icon to clear the input field.

📸 Screenshots

👨‍💻 Author

Emre Birkan Kervan

GitHub: birkankervan
LinkedIn: emre-birkan-kervan

⭐ Acknowledgements

Thanks to all the open-source contributors whose work was used in this project.
Special thanks to the React community for their continuous support and resources.

Feel free to contribute, open issues, or suggest features to make this tool even better!