doc-jsx

A JSX pragma for document

Install

npm install --save doc-jsx

Usage with JSX

/** @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

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

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