h-html
A library to quickly create virtual nodes for Composi using HTML tag names instead of Composi's h function. It enables you to use a simpler syntax for hyperscript using tag names. This is a great choice for those who do not like using JSX for defining component markup.
Installation
Open your terminal and cd
to your project. Then run:
npm i -D h-html
Call Singature
All tag methods take two arguments:
- An object for properties/attributes
- A child or array of children
If the tag has no properties, just provide an empty object: {}
. You could also pass null
, but two curly braces is shorter.
In the example below we pass an empty object for properties and a string as the child.
This will result in:
The Title
Here we give the tag a class and a title attribute:
This will result in:
The Title
Import All Tags
Since this uses ES6 imports, if you need to use a lot of tags, you can simplify the import using an alias:
import * as tag from 'h-html' function title(message) { return tag.nav( {}, tag.h1({}, 'The Title') )} function list() { return tag.ul( {class: 'list'}, [ tag.li({}, 'Item One'), tag.li({}, 'Item Two'), tag.li({}, 'Item Three') ] )}
Use with Composi
After installing h-html
you can start using it with Composi. Below is an example:
// Define the title: { return }// Render the tag: //******//// List ////******// // Data for list component:const fruits = 'Apples' 'Oranges' 'Bananas' // Create list items: { return data} // Define list component.// Pass it listItems function: { return } // Render list:
Notice how we had to break out the list items as a separate function. With JSX you can include an array with map
inside curly braces. With hyperscript functions you need to define a separate function to do that. That's because h
is expecting either a primitive value as a child (string, number, boolean), or an array of children.
ES6
You could refactor the above example to use ES6 arrow functions for more concise code:
// Define the title:const title = // Render the tag: //******//// List ////******// // Data for list component:const fruits = 'Apples' 'Oranges' 'Bananas' // Create list items:const listItems = data // Define list component.// Pass it listItems function.const list = // Render list: