API

HEle

This is the entry point to hele. If you load hele from a script tag, all the APIs are avaliable on the HEle global. If you use hele as a module, you can write import HEle from 'hele' or var HEle = require('hele').

Component

Components make it possible to split a complex app into independent and reusable pieces. See API-Component.

createElement

HEle.createElement(type, props, ...children): HElement;

This method creates a virtual element of the given type. (Both props and children are optional.)

type

type can be one of the following:

• string Such as 'div', 'h1', 'button' and so on.
• ComponentConstructor A component constructor.
• ComponentFactory A factory function that receives the props and returns the result.

props

props is an object that tell the properties. If type is a string, it will be treated as the attribute list of the element, otherwise it will be passed to the constructor or the factory.

In addition, some special props will be handled differently:

ref

The value of this prop must be a reference. The current property of that reference will be set to the DOM element if type is a string, or the component if type is a constructor, or undefined if type is a factory.

style

style prop stands for the style of the element, and it can be either a string(like an attribute of the element) or an object which represents a style list. (Only when type is a string.)

class

This prop can be either a string or an array. If it is any array, then only the strings in it will be joined together and set to the element. (It only works if type is a string.)

on*

A prop whose name starts with 'on' means an event listener. The event name after 'on' is case-sensitive(it will be directly passed to element.addEventListener), and it can be followed with one or more options('capture', 'nonpassive' or 'once'), for example, 'ontouchmoveNonpassiveCapture', 'onDOMContentLoadedOnce' and so on. (It only works if type is a string too.)

children

Other arguments will be the childNodes of the element if type is a string, or be passed to the component constructor/factory as props.children.

xmlns

This prop is used to specify the namespace while creating an element and only works when type is a string. (Namespaces can be inherited unless you set no-xmlns to true.)

no-xmlns

When this prop is set to true on an element, the namespace will be ignored while creating it.

createFactory

HEle.createFactory(type): ComponentFactory;

This method creates a component factory of the given type. (The possible values of type are exactly the same as HEle.createElement)

render

HEle.render(element, root, deepClear): void;

This method renders element to root. (It will first remove the children of root. By default, it is a deep removal, if you want a shallow one, pass false as the third parameter.)

Fragment

The Fragment component lets you create multiple elements without an extra container element.

For example,

HEle.render(
    (
        <HEle.Fragment>
            <h1>Foo</h1>
            <h2>Bar</h2>
        </HEle.Fragment>
    ),
    document.getElementById('div#root')
);

will result in:

<div id="root">
    <h1>Foo</h1>
    <h2>Bar</h2>
</div>

A short syntax: (available in Babel v7.0.0-beta.31 and above, TypeScript v2.6.2 and above...)

<>
    <li>A</li>
    <li>B</li>
</>

Portal

The Portal component provides a better way to render children into a specified container node. This may be useful if you need the children to be somewhere else. (e.g. dialogs, tooltips and so on.)

You can use container prop to specify a container node. If container is not specified, a div appended to document.body will be created to contain the children. In addition, there is an optional deepClear prop which will be passed to render directly.

For instance:

HEle.render(
    (
        <HEle.Portal container={document.getElementById('portal')}>
            <p>I'll be in #portal instead of #root!</p>
        </HEle.Portal>
    ),
    document.getElementById('root')
);

Context

The Context component lets you pass a value prop as the context of descendants.

For example:

<HEle.Context value={theme}>
    <ThemedHeader />
    <ThemedContent />
    <ThemedFooter />
</HEle.Context>

Reference

In some cases, you may want to keep a reference to a component or an element, so HEle.Reference is there. Create a reference via new HEle.Reference() or component.createRef(name), pass it as a ref prop to the component/element and use reference.current to access what you want.

Ticker

Ticker manages component updating and there are some options:

Ticker.tickMethod

HEle.Ticker.tickMethod(callback): void;

This method decides how the tick callback is handled. By default, it is set to HEle.defaultTickMethod which calls requestAnimationFrame internally. You may set your own method like this if needed:

// If you set it like this, then updates will be processed every 100ms.
HEle.Ticker.tickMethod = callback => {
    setTimeout(() => {
        callback();
    }, 100);
};

Ticker.maxUpdateTime

This property tells how long the updating can take each tick.

Ticker.maxClearTime

This property tells how long the clear checking can take each tick.