Installation and Integration

Quickstart

To quickly integrate Capture Eye, include the following HTML:

<head>
  <script
    type="module"
    src="https://cdn.jsdelivr.net/npm/@numbersprotocol/capture-eye@latest/dist/capture-eye.bundled.js"
  ></script>
</head>
<body>
  <capture-eye nid="bafybeief3yriouin54tzub5otnzka6muacrsu32tl2vxnaexgffizdxxqy">
    <media-viewer
      width="600px"
      src="https://ipfs-pin.numbersprotocol.io/ipfs/bafybeief3yriouin54tzub5otnzka6muacrsu32tl2vxnaexgffizdxxqy"
    ></media-viewer>
  </capture-eye>
</body>

Using <media-viewer>

The media-viewer component within <capture-eye> automatically detects the source file type (image or video) for display. You can replace <media-viewer> with your preferred components, such as <img>, <video>, or any custom display element.

For a live demonstration, visit the interactive playground.

Component Attributes

Integration with Frontend Frameworks

Capture Eye integrates seamlessly with vanilla HTML as well as popular frontend frameworks. Below are examples for different environments:

Vanilla HTML

This method works seamlessly across most website projects, including frontend frameworks like Next.js (as a client-side component) and CMS platforms or no-code builders like WordPress or Webflow. Capture Eye can be integrated as long as the framework or builder supports custom HTML.

To add Capture Eye with vanilla HTML, import the component via CDN and place the <capture-eye> tag in your HTML:

<head>
  <script
    type="module"
    src="https://cdn.jsdelivr.net/npm/@numbersprotocol/capture-eye@latest/dist/capture-eye.bundled.js"
  ></script>
</head>
<body>
  <capture-eye nid="bafybeief3yriouin54tzub5otnzka6muacrsu32tl2vxnaexgffizdxxqy">
    <img
      width="600px"
      src="https://ipfs-pin.numbersprotocol.io/ipfs/bafybeief3yriouin54tzub5otnzka6muacrsu32tl2vxnaexgffizdxxqy"
    />
  </capture-eye>
</body>

Using capture-eye@latest in the CDN link ensures you’re always using the latest version, though updates may take up to 12 hours to propagate due to caching. For a stable version, specify a semantic version instead, e.g., [email protected].

React

In React, install the package:

npm install @numbersprotocol/capture-eye @lit/react

Define the Capture Eye component using @lit/react:

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',
  },
});

Then, use it in your JSX:

<CaptureEyeComponent nid="bafybeief3yriouin54tzub5otnzka6muacrsu32tl2vxnaexgffizdxxqy">
  <img src="https://ipfs-pin.numbersprotocol.io/ipfs/bafybeief3yriouin54tzub5otnzka6muacrsu32tl2vxnaexgffizdxxqy" />
</CaptureEyeComponent>

Angular

To use Capture Eye in Angular, first install:

npm install @numbersprotocol/capture-eye @webcomponents/webcomponentsjs

Add the webcomponents loader to angular.json:

"scripts": [
  "node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"
]

Enable CUSTOM_ELEMENTS_SCHEMA in your module:

import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
@NgModule({
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
})

Add Capture Eye in your component:

<capture-eye nid="bafybeief3yriouin54tzub5otnzka6muacrsu32tl2vxnaexgffizdxxqy">
  <img width="600px" src="https://ipfs-pin.numbersprotocol.io/ipfs/bafybeief3yriouin54tzub5otnzka6muacrsu32tl2vxnaexgffizdxxqy" />
</capture-eye>

Vue

For Vue, import Capture Eye and use it in your template:

<script setup>
import '@numbersprotocol/capture-eye';
</script>

<template>
  <capture-eye nid="bafybeief3yriouin54tzub5otnzka6muacrsu32tl2vxnaexgffizdxxqy">
    <img
      width="600"
      src="https://ipfs-pin.numbersprotocol.io/ipfs/bafybeief3yriouin54tzub5otnzka6muacrsu32tl2vxnaexgffizdxxqy"
    />
  </capture-eye>
</template>

JavaScript Control Methods

The <capture-eye> component provides methods to control its behavior programmatically:

isOpened

Description: Checks if the modal is open.

Usage:

const captureEye = document.querySelector('capture-eye');
console.log(captureEye.isOpened);

open()

Description: Opens the modal.

Usage:

captureEye.open();

close()

Description: Closes the modal.

Usage:

captureEye.close();

Style Customization

Capture Eye uses Shadow DOM for encapsulation but allows for customization via JavaScript. The example below demonstrates how to apply style customization if the customization option is not provided in the Capture Eye component attributes.

Customizing the Modal Background

Modify the modal’s background color:

<script>
  document.addEventListener('DOMContentLoaded', () => {
    const captureEyeModal = document.querySelector('capture-eye-modal');
    const modalContainer = captureEyeModal.shadowRoot.querySelector('.modal-container');
    modalContainer.style.backgroundColor = 'midnightblue';
  });
</script>
PreviousCapture EyeNextCapture SDK

Last updated