https://github.com/nexonauts/nexo-html2jsx

Convert HTML string to JSX syntax
https://github.com/nexonauts/nexo-html2jsx

html html2jsx htmltojsx jsx jsx-renderer jsx-syntax nextjs open-source react reactjs

Last synced: 27 days ago
JSON representation

Convert HTML string to JSX syntax

• Host: GitHub
• URL: https://github.com/nexonauts/nexo-html2jsx
• Owner: Nexonauts
• Created: 2024-02-10T08:56:26.000Z (11 months ago)
• Default Branch: main
• Last Pushed: 2024-02-21T13:23:24.000Z (10 months ago)
• Last Synced: 2024-02-21T14:35:16.552Z (10 months ago)
• Topics: html, html2jsx, htmltojsx, jsx, jsx-renderer, jsx-syntax, nextjs, open-source, react, reactjs
• Language: TypeScript
• Homepage:
• Size: 28.3 KB
• Stars: 0
• Watchers: 0
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        


#  Nexo html2jsx

The **Nexo html2jsx** Converter is an npm package designed to facilitate the conversion of HTML strings into JSX syntax. It provides a versatile toolset for developers working with HTML-based content who need to integrate it seamlessly into React applications.

## Features

- **Conversion**: Convert HTML strings into JSX syntax, preserving structure and attributes.

- **Customization**: Configure the conversion process with options for component creation, indentation, and comment handling.

- **Style Parsing**: Automatically convert CSS styles into JSX-compatible format.

- **DOM Environment**: Utilize the `JSDOM` package to create a lightweight DOM environment in Node.js for conversion.

## Installation

To install the  Nexo html2jsx, simply run:

```

npm i nexo-html2jsx

```

## Usage

```typescript

import HTMLtoJSX, { configType } from 'nexo-html2jsx';

// Configure conversion options

const config: configType = {

    createClass: true,

    outputComponentName: 'MyComponent',

    indent: '\t',

    hideComment: false,

    createFunction: false

};

    

// Initialize HTML to JSX converter

const converter = htmlToJsx(createElement);

// Convert HTML string to JSX

const jsxString = converter(config).convert('
Hello, World!
');


console.log(jsxString);

```

## Configuration Options

- **createClass**: Set to `true` to create a React class component, or `false` to create a function component. Default is `false`.

- **outputComponentName**: Specify the name of the output component. Default is `'MyNexoComponent'`.

- **indent**: Choose the indentation style for the generated JSX code. Default is `'\t'`.

- **hideComment**: Set to `true` to hide HTML comments in the converted JSX. Default is `false`.

- **createFunction**: Set to `true` to create a function component, or `false` to create a class component. Default is `true`.

## Issues

If you encounter any issues or have suggestions for improvement, please [open an issue](https://github.com/Nexonauts/nexo-html2jsx/issues) on GitHub.