Nodeschool Public Materials

    jsx-pragma

    1.0.5 • Public • Published

    jsx-pragma

    npm version

    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>

    Keywords

    none

    Install

    npm i jsx-pragma

    DownloadsWeekly Downloads

    1

    Version

    1.0.5

    License

    MIT

    Unpacked Size

    15.6 kB

    Total Files

    11

    Last publish

    Collaborators

    • avatar