virtual-dom-util v0.0.5

virtual-dom-util

Utility functions for making virtual-dom easier to work with

JSX Support

Provides a wrapper function for virtual-dom/h that is compliant with JSX.

/** @jsx h */
import { h }  from 'virtual-dom-utils';

<div>
  <h1>Title</h1>
  <button onclick={e => console.log(e)}>!</button>
  <input type='text' />
</div>

This wrapper also evaluates functions if they are passed in the first position, meaning it can also be used to build components from other components.

function Profile({ user }) {
  return (
    <Avatar src={user.avatar} />
    <Name first={user.first} last={user.last} />
    <p>{user.bio}</p>
  );
}

function Avatar({ src }) {
  return (
    <img
      width="200"
      height="200"
      src={src}
    />
  );
}

function Name({ first, last }) {
  return (
    <div>
      <span>{first}</span>
      <strong>{last}</strong>
    </div>
  );
}

const user = {
  first: 'Jon',
  last: 'Snow',
  avatar: 'feeling-chilly.jpeg'
};

<Profile user={user} />