From 162bae487feabede651535ab664a220b2be99f5e Mon Sep 17 00:00:00 2001 From: Ayo Date: Sun, 17 Sep 2023 11:27:42 +0200 Subject: [PATCH] chore: add quick start example --- README.md | 45 +++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 45 insertions(+) diff --git a/README.md b/README.md index d0908be..f612c7d 100644 --- a/README.md +++ b/README.md @@ -1,3 +1,5 @@ +> TLDR; See [quick start example](#minimal-example) you can copy-paste and modify + Web Component Base --- 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. [Installation](#installation) 1. [Usage](#usage) +1. [Minimal Example](#minimal-example) - Quick start you can copy-paste 😉 1. [Life-Cycle Hooks](#life-cycle-hooks) 1. [`onInit`](#oninit) - the component is connected to the DOM 1. [`onChanges`](#onchanges) - an attribute value changed @@ -77,6 +80,48 @@ The result is a reactive UI that updates on attribute changes: UI showing feeling toward Web Components changing from SAD to EXCITED +## 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 + + + + + + WC Base Test + + + + + + + +``` + ## Life-Cycle Hooks Define behavior when certain events in the component's life cycle is triggered by providing hook methods