phy
Minimal hyperscript helpers for Preact.
The intent while creating this package was to create as small of a footprint as possible, with only Preact as a dependency.
Examples
const h = require('phy');
module.exports = function SomeComponent() {
return h('#foo', h('span.bar', 'whee!'));
}
or, if you need access to other things from Preact, Component
and render
are passed thru for your convenience:
const { h, Component } = require('phy');
class SomeComponent extends Component {
render() {
return h('#foo', h('span.bar', 'whee!'));
}
}
module.exports = SomeComponent;
Optional Tag Helpers
At the cost of a modestly larger import and slight function call overhead, you can also use a set of named tag function helpers for terser syntax.
Important: bare string children must be enclosed in an array.
h('div', 'kittens')
or div(['kittens'])
are ok, div('kittens')
is NOT.
// h() is passed through as an export so you don't need to require preact
const { h, span, div } = require('phy/tags');
module.exports = function SomeComponent() {
return div('#foo', [span(['kittens']), h(SomeOtherComponent)]);
}