# pug-to-react-element

> A plugin for producing React elements from Pug templates without JSX

Latest version **0.5.1** (published 2019-01-27) · MIT license · 0 weekly downloads

## Install

```sh
npm install pug-to-react-element
pnpm add pug-to-react-element
yarn add pug-to-react-element
bun add pug-to-react-element
```

## 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.5.1 |
| Published | 2019-01-27 |
| First published | 2019-01-19 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 14.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Fewed |
| Maintainers | fewed |
| Keywords | npm, React.createElement, React, Pug |

## Links

- npm: https://www.npmjs.com/package/pug-to-react-element
- Homepage: https://github.com/Fewed/Pug-to-React-elements
- npm.io page: https://npm.io/package/pug-to-react-element

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 0.5.1 (latest) — 2019-01-27
- 0.5.0 — 2019-01-20
- 0.4.1 — 2019-01-20
- 0.4.0 — 2019-01-20
- 0.3.0 — 2019-01-19
- 0.2.0 — 2019-01-19
- 0.1.0 — 2019-01-19

## README

# pug-to-react-element

A plugin for producing React elements from Pug templates without JSX

## Table of Contents

- [Installation](#installation)
- [Usage](#usage)
- [Syntax](#syntax)
- [Support](#support)
- [Contributing](#contributing)

## Installation

A plugin does not download any packages but require React module.

```sh
npm i pug-to-react-element
```

## Usage

### API

- `pre(markup)` - transforms Pug template string markup into React element structure. It is exported as default. A static property `tabSize` defines markup indentation.
- `getID()` - generates unique string. Can be used for React element "key" property.

### Example

Create React component `MyComponent.js`:

```sh
import React, { Component } from "react";
import pre from "pug-to-react-element";

// config indentation size in range from 2 (default) to 4 if it needs
// pre.tabSize = 4;

const markup = `

div() 0#[span() 1]2#[span() 3]4
div()
  div() 5
    6
    span() 7
    8
div() 9
    div() 10
      div() 11
    input(type="tel" required)

`;

class MyComponent extends Component {
	render() {
		return pre(markup);
	}
}

export default MyComponent;
```

Use it:

```sh
import ReactDOM from "react-dom";
import React, { Component } from "react";
import MyComponent from "./components/MyComponent.js";

const   root = document.querySelector("#root"),
        myComponent = new MyComponent().render();

ReactDOM.render(myComponent, root);
```

## Syntax

A plugin uses limited [pug](https://pugjs.org/api/getting-started.html) syntax. Here is a list of supported constructions:

```sh
// creates <div></div>
div()

// creates <input id="id0" className=".div" required>
input(id="id0" className=".div" required)

// creates <p>Lorem ipsum</p>
p() Lorem ipsum

// creates <div></div><p></p>
div()
p()

// creates <div><p></p></div>
div()
    p()

// creates <div>0<span>1</span>2</div>
div() 0#[span() 1]2
```

## Support

Please [open an issue](https://github.com/Fewed/Pug-to-React-elements/issues/new) for support.

## Contributing

Please contribute using [Github Flow](https://guides.github.com/introduction/flow/). Create a branch, add commits, and [open a pull request](https://github.com/Fewed/Pug-to-React-elements/compare).

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