jsx-pragma

Small javascript library for transpiling JSX to DOM Elements.

Installation

npm i -D jsx-pragma

jsx-pragma provides functions for use with Babel to transpile JSX.

Usage

The following JSX

<div />

transpiles to HTMLDIVElement.

Add classes, ids, & common attributes

<ul className={styles.list} />

<img src={imgSrc} />

The eventListener attribute takes an array that contains exactly 2 elements: the event type and the function.

<span eventListener={['click', e => {
    console.log(e)
}]} />

Use a function as an element type to create functional components with custom attributes. Currently jsx-pragma only supports functions as elements, classes are not yet supported but could prove useful for managing component state.

const Component = ({ attributes: { items }}) => (
    <ul>
        {items.map(item => <li>{item.name}</li>)}
    </ul>
)

const items = ['foo' 'bar']

<Component items={items} />

Pass children to any element

const Component = ({ children }) => (
    <div>
    { children }
    </div>
)

<Component>
    <div></div>
    Hey! These divs aren't going to nest themselves!
</Component>