0.0.1 • Published 6 years ago
preact-tag v0.0.1
preact-tag
This small library(<1kbs) allows to encapsulate the use of components based on Preact and CustomElements.
import {h,Component} from "preact";
import register from "preact-tag";
register(
"preact-tag",
class extends Component{
static get props(){
return ["title"];
}
render(props){
<div>
<h1>hello {props.title}</h1>
</div>
}
}
);
By adding the static method props
to the component created on the basis of preact.Component
, you can recover and know the mutations of the properties associated with CustomElement.
prefijo json-{prop}
Any property within the CustomElement can be parsed by JSON.parse
, simply by prefixing the property with the prefix json-, then you can use it with this.props.json<prop>
, by default preact-tag, applies camelCase format, to normalize the name of the property.
import {h,Component} from "preact";
import register from "preact-tag";
register(
"preact-tag",
class extends Component{
static get props(){
return ["json-list-users", "json-checked"];
}
render(props){
<div>
{props.jsonListUsers.map(({name})=><div>
<h1>{name}</h1>
</div>)}
<input type="checkbox" checked={props.jsonChecked}/>
</div>
}
}
);