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

chore: update readme; add badges, rephrase

Browse source
This commit is contained in:
Ayo 2023-09-17 19:29:26 +02:00
parent 53cf7c492b
commit 377b129d73
1 changed files with 12 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
README.md
View file

@ -1,18 +1,23 @@
> TLDR; See [quick start example](#minimal-example) you can copy-paste and modify > **TLDR;** See the [quick start example](#quick-start-example) you can just copy, refactor, and modify 😉
Web Component Base Web Component Base
--- ---
This is a very minimal base class for creating reactive custom elements easily.
When you extend the `WebComponent` class for your component, you only have to define the `template()` and `properties`, and changes in any attribute value will automatically cause the UI to render. [![Package information: NPM version](https://img.shields.io/npm/v/web-component-base)](https://www.npmjs.com/package/web-component-base)
[![Package information: NPM license](https://img.shields.io/npm/l/web-component-base)](https://www.npmjs.com/package/web-component-base)
[![Package information: NPM downloads](https://img.shields.io/npm/dt/web-component-base)](https://www.npmjs.com/package/web-component-base)
The result is a reactive UI on attribute changes. This provides a very minimal base class for creating reactive custom elements easily.
When you extend the `WebComponent` class for your component, you only have to define the `template` and `properties`. Any change in any property value will automatically cause just the component UI to render.
The result is a reactive UI on property changes.
## Table of Contents ## Table of Contents
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. [Quick Start Example](#quick-start-example) 😉
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
@ -78,9 +83,9 @@ 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 ## Quick Start Example
If you want a quick start example to copy, this is an example of using a custom element in a single .html file: Here is an example of using a custom element in a single .html file:
```html ```html
<!DOCTYPE html> <!DOCTYPE html>