# html-to-react-convertor

> Convert html files to a react app

Latest version **0.0.2** (published 2016-11-14) · MIT license · 0 weekly downloads

## Install

```sh
npm install html-to-react-convertor
pnpm add html-to-react-convertor
yarn add html-to-react-convertor
bun add html-to-react-convertor
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.2 |
| Published | 2016-11-14 |
| First published | 2016-11-11 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Chun-Yang |
| Maintainers | young_spring |
| Keywords | react, html, converter |

## Links

- npm: https://www.npmjs.com/package/html-to-react-convertor
- Repository: https://github.com/poetic/html-to-react-convertor
- Homepage: https://github.com/poetic/html-to-react-convertor#readme
- Issues: https://github.com/poetic/html-to-react-convertor/issues
- npm.io page: https://npm.io/package/html-to-react-convertor

## Alternatives

- [@tsparticles/shape-image](https://npm.io/package/@tsparticles/shape-image.md) — 303.7K weekly downloads
- [@tsparticles/shape-line](https://npm.io/package/@tsparticles/shape-line.md) — 233.7K weekly downloads
- [stringify-attributes](https://npm.io/package/stringify-attributes.md) — 58.6K weekly downloads
- [mobile-drag-drop](https://npm.io/package/mobile-drag-drop.md) — 46.3K weekly downloads
- [@comunica/actor-rdf-parse-html](https://npm.io/package/@comunica/actor-rdf-parse-html.md) — 29.2K weekly downloads

## Recent versions

- 0.0.2 (latest) — 2016-11-14
- 0.0.1 — 2016-11-11

## README

# html-to-react-converter

html-to-react-converter converts htmls to a working and modifiable react app
using several configuration files.

## Usage

You need to create config files for the `htr` cli to extract react components
and generate other files from html files.

### hrc/options.json

- source:
  - description: The source file or folder for the html files, relative to the project folder.
  - default: './'
- destination:
  - description: The destination folder for all the components
  - default: 'client/'
- plugins
- plugins.[]:
  - description: Custom plugins as node modules you want to use

- Example:
  ```
  {
    "source": ".design/html",
    "destination": "client/",
    "plugins": []
  }
  ```

### hrc/routes.json

This file is used to create react Route file so that the generate files are
a complete react project.

### hrc/pages/[PageName].json

Theses files are used to extract and create react components from htmls.
We use jquery selector to target the components.

- file:
  - description: file path relative to the source configured in options.json
  - default: path/to/source/[PageName].html
- components
- components.[].selector:
  - description: the selector used to target the html
  - required
- components.[].name:
  - description: the name of the generated component
  - required
- components.[].skip:
  - description: if skip is true, we do not write to the destination folder
- components.[].props
- components.[].props.[].key:
  - description: the key of the prop we apply to the tag
  - required
- components.[].props.[].value:
  - description: the value of the prop we apply to the tag
  - required
  - note: this a STRING, we will paste this string as literal code

- Example:
  ```
  {
    "file": "users.html",
    "components": [
      {
        "selector": "#nav-bar",
        "name": "NavBar",
        "skip": true,
        "props": [
          {
            "selector": ".picture",
            "key": "src",
            "value": "\"`images/${this.props.user.picture}`\""
          }
        ]
      }
    ]
  }
  ```

### CLI
After you run `htr`, we will create the following contents:
- path/to/destination/components/

  This will contain all generated components. For each component, we will
  generate a container component that you can manipulate.

- path/to/destination/index.jsx

  This will contain all the routes

- htr/staging/

  This will contain all staging files that when not skipped will be
  copied to the destination components

## [TODO](README.TODO.md)

---
_Source: https://npm.io/package/html-to-react-convertor · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._