https://github.com/uppercod/preact-tag
This small library(<520 bytes umd/gzip) allows to encapsulate the use of components based on Preact and CustomElements.
https://github.com/uppercod/preact-tag
Last synced: about 1 year ago
JSON representation
This small library(<520 bytes umd/gzip) allows to encapsulate the use of components based on Preact and CustomElements.
- Host: GitHub
- URL: https://github.com/uppercod/preact-tag
- Owner: UpperCod
- Created: 2018-08-24T02:53:45.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2018-08-26T16:32:15.000Z (almost 8 years ago)
- Last Synced: 2025-03-22T00:44:20.145Z (about 1 year ago)
- Language: JavaScript
- Homepage: https://jsfiddle.net/uppercod/zusc3jbL/9/
- Size: 22.5 KB
- Stars: 18
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# preact-tag
This small library(<520 bytes umd/gzip) allows to encapsulate the use of components based on **Preact** and **CustomElements**.
### JS
```js
import {h,Component} from "preact";
import register from "preact-tag";
register(
"preact-tag",
class extends Component{
static get props(){
return ["title"];
}
render(props){
hello {props.title}
}
}
);
```
### HTML
```html
```
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`, by default preact-tag, applies camelCase format, to normalize the name of the property.
```js
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){
{props.jsonListUsers.map(({name})=>
{name}
)}
}
}
);
```