d3activated

Small javascript library for transpiling JSX to DOM Elements and optionally wrapping the element in d3-selection.

Installation

npm i -D d3activated

d3activated provides functions for use with bundlers to transpile JSX to plain DOM elements.

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.

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>