From 0a7a21fe703b7f1a0db44c629d055b6d0bb820df Mon Sep 17 00:00:00 2001 From: James Chien Date: Fri, 10 Nov 2023 19:44:42 +0800 Subject: [PATCH] docs: update examples Signed-off-by: James Chien --- README.md | 94 +++++++++++++++++++++++++++++++++++++++++++-- dev/index.html | 24 ++---------- examples/index.html | 26 +++---------- 3 files changed, 99 insertions(+), 45 deletions(-) diff --git a/README.md b/README.md index 1701f69..7396bc1 100644 --- a/README.md +++ b/README.md @@ -11,13 +11,38 @@ ## Usage -### HTML +### Using with vanilla HTML -See the [example html](dev/index.html). +The most simple way of adding Capture Eye to a webpage is by importing via CDN and add the component tag: -To run a dev server and view the example HTML in browser, run `npm run dev`. +```html + + + + + + + + +``` + +For a full example, see the [example html](dev/index.html). + +To run a development server and view the example HTML in your browser, execute the following command: + +```bash +npm run dev +``` -### React +You can also try out the component using the [interactive playground](https://playcode.io/capture_eye_demo). + +### Using with React + +To add Capture Eye to a React application, first install the packages: + +```bash +npm i @numbersprotocol/capture-eye @lit/react +``` Add the following code to define a React component for Capture Eye: @@ -45,6 +70,67 @@ Use the CaptureEyeComponent in JSX: ``` +### Using with Angular + +To add Capture Eye to an Angular application, first install the packages: + +```bash +npm i @numbersprotocol/capture-eye @webcomponents/webcomponentsjs +``` + +Add the webcomponents loader to the `script` section in `angular.json`: + +```json +... +"scripts": [ + "node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js" +], +... +``` + +Make sure `CUSTOM_ELEMENTS_SCHEMA` is set in your module: + +```ts +import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core'; +@NgModule({ + schemas: [CUSTOM_ELEMENTS_SCHEMA], + ... +}) +``` + +Finally, import the Capture Eye package in your `*.component.ts` and add the `` template tag to your component: + +```ts +import '@numbersprotocol/capture-eye'; +``` + +```html + + + +``` + +### Using with Vue + +For Vue users, the usage is similar to use native HTML elements. The official Vue doc provides a guide on [Using Vue with Web Components](https://vuejs.org/guide/extras/web-components.html). + +To add Capture Eye to a SFC, simply import the Capture Eye package in the script setup and add the component tag in the template: + +```vue + + + +``` + + ### Component attributes | Attribute Name | Required | Description | Example | diff --git a/dev/index.html b/dev/index.html index e3f5bd5..cf6055a 100644 --- a/dev/index.html +++ b/dev/index.html @@ -15,20 +15,18 @@ -

Sample webpage title

- -

Example #1: using example Nid

+

Example: Capture Eye

-

Example #2: using image Nid

+

Example: asset data not found

@@ -37,19 +35,5 @@ src="https://ipfs-pin.numbersprotocol.io/ipfs/bafybeigv4t4nji5b6hbgzj3wllmnfc324c57no6chy66cp24lpcjt7ny4i" /> - -

Example #3: using video Nid

- - - - -

Sample webpage footer

diff --git a/examples/index.html b/examples/index.html index 16ae8d5..1eaede0 100644 --- a/examples/index.html +++ b/examples/index.html @@ -4,7 +4,7 @@ <capture-eye> Demo - + -

Sample webpage title

- -

Example #1: using example Nid

+

Example: Capture Eye

-

Example #2: using image Nid

+

Example: asset data not found

@@ -35,19 +33,5 @@ src="https://ipfs-pin.numbersprotocol.io/ipfs/bafybeigv4t4nji5b6hbgzj3wllmnfc324c57no6chy66cp24lpcjt7ny4i" /> - -

Example #3: using video Nid

- - - - -

Sample webpage footer