# doc-jsx

> A JSX pragma for document

Latest version **0.1.0** (published 2016-03-03) · MIT license · 0 weekly downloads

## Install

```sh
npm install doc-jsx
pnpm add doc-jsx
yarn add doc-jsx
bun add doc-jsx
```

## 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.1.0 |
| Published | 2016-03-03 |
| First published | 2016-03-03 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | Dustin Specker |
| Maintainers | dustinspecker |
| Keywords | jsx, document |

## Links

- npm: https://www.npmjs.com/package/doc-jsx
- Repository: https://github.com/dustinspecker/doc-jsx
- Homepage: https://github.com/dustinspecker/doc-jsx#readme
- Issues: https://github.com/dustinspecker/doc-jsx/issues
- npm.io page: https://npm.io/package/doc-jsx

## Alternatives

- [@cantoo/pdf-lib](https://npm.io/package/@cantoo/pdf-lib.md) — 297.9K weekly downloads
- [datatables.net-buttons](https://npm.io/package/datatables.net-buttons.md) — 200.1K weekly downloads
- [@ckeditor/ckeditor5-export-pdf](https://npm.io/package/@ckeditor/ckeditor5-export-pdf.md) — 167.0K weekly downloads
- [scanbot-web-sdk](https://npm.io/package/scanbot-web-sdk.md) — 15.0K weekly downloads
- [@syncfusion/ej2-angular-pdfviewer](https://npm.io/package/@syncfusion/ej2-angular-pdfviewer.md) — 8.8K weekly downloads

## Recent versions

- 0.1.0 (latest) — 2016-03-03

## README

# doc-jsx
[![NPM version](https://badge.fury.io/js/doc-jsx.svg)](https://badge.fury.io/js/doc-jsx) [![Build Status](https://travis-ci.org/dustinspecker/doc-jsx.svg)](https://travis-ci.org/dustinspecker/doc-jsx) [![Coverage Status](https://img.shields.io/coveralls/dustinspecker/doc-jsx.svg)](https://coveralls.io/r/dustinspecker/doc-jsx?branch=master)

[![Code Climate](https://codeclimate.com/github/dustinspecker/doc-jsx/badges/gpa.svg)](https://codeclimate.com/github/dustinspecker/doc-jsx) [![Dependencies](https://david-dm.org/dustinspecker/doc-jsx.svg)](https://david-dm.org/dustinspecker/doc-jsx/#info=dependencies&view=table) [![DevDependencies](https://david-dm.org/dustinspecker/doc-jsx/dev-status.svg)](https://david-dm.org/dustinspecker/doc-jsx/#info=devDependencies&view=table)

> A JSX pragma for document

## Install
```
npm install --save doc-jsx
```

## Usage with JSX
```javascript
/** @jsx element */
// JSX PRAGMA MUST BE THE SAME NAME AS THE IMPORT FROM 'doc-jsx'
import element from 'doc-jsx'

const handleClick = () => alert('Hello!')

const component = (
  <div class='hi'>
    <button onClick={handleClick}>Click Me!</button>
    <a href='google.com'>Google</a>
  </div>
)

// need to manually insert into DOM
document.querySelector('body').appendChild(component)
```

## Usage with [dscript](https://github.com/dustinspecker/dscript)
```javascript
import dscript from 'dscript'
import element from 'docs-jsx'

const {a, button, div} = dscript(element)

const handleClick = () => alert('Hello!')

const component = (
  div('.hi', [
    button({onClick: handleClick}, ['Click Me!']),
    a({href: 'google.com'}, ['Google'])
  ])
)

// need to manually insert into DOM
document.querySelector('body').appendChild(component)
```

## Usage with [dscript-doc](https://github.com/dustinspecker/dscript-doc)
```javascript
import {a, button, div} from 'dscript-doc'

const handleClick = () => alert('Hello!')

const component = (
  div('.hi', [
    button({onClick: handleClick}, ['Click Me!']),
    a({href: 'google.com'}, ['Google'])
  ])
)

// need to manually insert into DOM
document.querySelector('body').appendChild(component)
```

## API
### element(tag, attrs, children)

#### tag

type: `string`

The tag name of the element to create. For example, 'div' or 'button'.

#### attrs

type: `object`

An object of attributes and event handlers to attach to the created element.

#### children

type: `array[Element]` | `...Element`

A list of Elements to append to the created element. If a child is a `string`, then it will be appended as a text node.

## LICENSE
MIT © [Dustin Specker](https://github.com/dustinspecker)

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