capture-eye 0.2.2
Install from the command line:
Learn more about npm packages
$ npm install @numbersprotocol/capture-eye@0.2.2
Install via package.json:
"@numbersprotocol/capture-eye": "0.2.2"
About this version
Capture Eye widget seamlessly integrates into your website, facilitating secure and transparent provenance display and purchases of digital content directly from the creator.
- Easily integrate with your digital products
- Capture Eye effortlessly blends with your existing platforms, elevating your content's value and trustworthiness.
- Decentralized storage of the actual media asset
- Secure, immutable and long-lasting preservation of your original digital assets, enhancing their credibility and authenticity.
<head>
<script
type="module"
src="https://cdn.jsdelivr.net/npm/@numbersprotocol/capture-eye/dist/capture-eye.bundled.js"
></script>
</head>
<body>
<capture-eye
nid="bafybeic3lj3rxypkmlgznch54fuvr563z6wugewkqm5eo2okqnagaq6oou"
prefetch="true"
>
<img
width="600px"
src="https://ipfs-pin.numbersprotocol.io/ipfs/bafybeic3lj3rxypkmlgznch54fuvr563z6wugewkqm5eo2okqnagaq6oou"
/>
</capture-eye>
</body>Visit the interactive playground for the live demo.
| Attribute Name | Required | Description | Example |
|---|---|---|---|
nid |
true | The unique Nid of the asset. | <capture-eye nid="bafybeigppahabe4x6r52jyvh2k7u7udpxm2vciqcamzzuung7rhfe6pkbe"></capture-eye> |
prefetch |
false | If it is present, the component will start fetching asset data when added to the DOM. Only use when you have only 1 Capture Eye component on the webpage because prefetching multiple Capture Eyes is not supported. | <capture-eye nid="..." prefetch></capture-eye> |
Capture Eye has been designed as a web component to facilitate seamless integration with both vanilla HTML and various frontend frameworks.
The most simple way of adding Capture Eye to a webpage is by importing via CDN and add the component tag:
<head>
<script
type="module"
src="https://cdn.jsdelivr.net/npm/@numbersprotocol/capture-eye/dist/capture-eye.bundled.js"
></script>
</head>
<body>
<capture-eye
nid="bafybeic3lj3rxypkmlgznch54fuvr563z6wugewkqm5eo2okqnagaq6oou"
prefetch="true"
>
<img
width="600px"
src="https://ipfs-pin.numbersprotocol.io/ipfs/bafybeic3lj3rxypkmlgznch54fuvr563z6wugewkqm5eo2okqnagaq6oou"
/>
</capture-eye>
</body>For a full example, see the example html.
To run a development server and view the example HTML in your browser, execute the following command:
npm run devTo add Capture Eye to a React application, first install the packages:
npm i @numbersprotocol/capture-eye @lit/reactAdd the following code to define a React component for Capture Eye:
import React from 'react';
import { createComponent } from '@lit/react';
import { CaptureEye } from '@numbersprotocol/capture-eye';
const CaptureEyeComponent = createComponent({
tagName: 'capture-eye',
elementClass: CaptureEye,
react: React,
events: {
onactivate: 'activate',
onchange: 'change',
},
});Use the CaptureEyeComponent in JSX:
<CaptureEyeComponent nid="bafybeigppahabe4x6r52jyvh2k7u7udpxm2vciqcamzzuung7rhfe6pkbe">
<img src="https://ipfs-pin.numbersprotocol.io/ipfs/bafybeigppahabe4x6r52jyvh2k7u7udpxm2vciqcamzzuung7rhfe6pkbe" />
</CaptureEyeComponent>To add Capture Eye to an Angular application, first install the packages:
npm i @numbersprotocol/capture-eye @webcomponents/webcomponentsjsAdd the webcomponents loader to the script section in angular.json:
...
"scripts": [
"node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"
],
...Make sure CUSTOM_ELEMENTS_SCHEMA is set in your module:
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 <capture-eye nid="..."></capture-eye> template tag to your component:
import '@numbersprotocol/capture-eye';<capture-eye
nid="bafybeic3lj3rxypkmlgznch54fuvr563z6wugewkqm5eo2okqnagaq6oou"
prefetch="true"
>
<img
width="600px"
src="https://ipfs-pin.numbersprotocol.io/ipfs/bafybeic3lj3rxypkmlgznch54fuvr563z6wugewkqm5eo2okqnagaq6oou"
/>
</capture-eye>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.
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:
<script setup>
import '@numbersprotocol/capture-eye';
</script>
<template>
<main>
<capture-eye
nid="bafybeief3yriouin54tzub5otnzka6muacrsu32tl2vxnaexgffizdxxqy"
prefetch="true"
>
<img
width="600"
src="https://ipfs-pin.numbersprotocol.io/ipfs/bafybeic3lj3rxypkmlgznch54fuvr563z6wugewkqm5eo2okqnagaq6oou"
/>
</capture-eye>
</main>
</template>Capture Eye utilizes shadow DOM for encapsulation as a web component. However, if needed, the encapsulated styles could still be modified for any specific customization need. The section uses vanilla HTML/JavaScript to demonstrate how it is done. For different frontend frameworks it could also be done easily following the same logic.
To customize the Capture Eye button, access and modify the shadow DOM of Capture Eye after it is loaded.
Example of changing the icon and width/height:
<script>
document.addEventListener('DOMContentLoaded', () => {
const captureEyeElements = document.querySelectorAll('capture-eye');
captureEyeElements.forEach((element) => {
const img = element.shadowRoot.querySelector(
'.capture-eye-button img'
);
img.src =
'https://ipfs-pin.numbersprotocol.io/ipfs/bafkreifqdodt35fu3ok62wurery47vgtdxw6ahcqdtsbi77gwiuzyvcsu4';
img.style.width = '30px';
img.style.height = '30px';
});
});
</script>In contrast to Capture Eye button, the Capture Eye modal is not a child element of it, instead it is injected to document root to act as a singleton and ensure it is not affected by parent element's inheritable styles, such as CSS transform.
Example of changing the modal background color:
<script>
document.addEventListener('DOMContentLoaded', () => {
const captureEyeModal = document.querySelector('capture-eye-modal');
const modalContentDiv =
captureEyeModal.shadowRoot.querySelector('.modal-container');
modalContentDiv.style.background = 'midnightblue';
});
</script>