ayo/wcb
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

chore: add quick start example

Browse source
This commit is contained in:
Ayo 2023-09-17 11:27:42 +02:00
parent e2871d87a3
commit 162bae487f
1 changed files with 45 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

45
README.md
View file

@ -1,3 +1,5 @@
> TLDR; See [quick start example](#minimal-example) you can copy-paste and modify
Web Component Base Web Component Base
--- ---
This is a very minimal base class for creating reactive custom elements easily. This is a very minimal base class for creating reactive custom elements easily.
@ -10,6 +12,7 @@ The result is a reactive UI on attribute changes.
1. [Vanilla JS import](#vanilla-js-import) 1. [Vanilla JS import](#vanilla-js-import)
1. [Installation](#installation) 1. [Installation](#installation)
1. [Usage](#usage) 1. [Usage](#usage)
1. [Minimal Example](#minimal-example) - Quick start you can copy-paste 😉
1. [Life-Cycle Hooks](#life-cycle-hooks) 1. [Life-Cycle Hooks](#life-cycle-hooks)
1. [`onInit`](#oninit) - the component is connected to the DOM 1. [`onInit`](#oninit) - the component is connected to the DOM
1. [`onChanges`](#onchanges) - an attribute value changed 1. [`onChanges`](#onchanges) - an attribute value changed
@ -77,6 +80,48 @@ The result is a reactive UI that updates on attribute changes:
<img alt="UI showing feeling toward Web Components changing from SAD to EXCITED" src="https://git.sr.ht/~ayoayco/web-component-base/blob/main/assets/wc-base-demo.gif" width="400" /> <img alt="UI showing feeling toward Web Components changing from SAD to EXCITED" src="https://git.sr.ht/~ayoayco/web-component-base/blob/main/assets/wc-base-demo.gif" width="400" />
## Minimal Example
If you want a quick start example to copy, this is an example of using a custom element in a single .html file:
```html
https://www.npmjs.com/package/web-component-base
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>WC Base Test</title>
<script type="module">
// import from unpkg
import WebComponent from "https://unpkg.com/web-component-base";
class HelloWorld extends WebComponent {
static get observedAttributes() {
return ['name'];
}
get template() {
return `<h1>Hello ${this.name || 'World'}!</h1>`;
}
}
customElements.define("hello-world", HelloWorld);
</script>
</head>
<body>
<hello-world name="Ayo"></hello-world>
<script>
const helloWorld = document.querySelector('hello-world');
setTimeout(() => {
helloWorld.setAttribute('name', 'Ayo zzzZzzz');
}, 2500);
</script>
</body>
</html>
```
## Life-Cycle Hooks ## Life-Cycle Hooks
Define behavior when certain events in the component's life cycle is triggered by providing hook methods Define behavior when certain events in the component's life cycle is triggered by providing hook methods