EctImageJs

ect-image-js exposes EctImageComponent as a Web Component for Vanilla JS and React applications.

Build

npm run build:ect-image-js

Output bundle:

• dist/ect-image-js/main.js

Registered tags:

• <ect-image>
• <ect-image-js>

Vanilla JS

<script type="module" src="../../dist/ect-image-js/main.js"></script>

<ect-image id="heroImage"></ect-image>

<script>
  const image = document.getElementById('heroImage');
  image.source = 'https://picsum.photos/900/320';
  image.width = '900';
  image.height = '320';
  image.text = 'Hero image';
</script>

React

import { useEffect, useRef } from 'react';
import '../../dist/ect-image-js/main.js';

type EctImageEl = HTMLElement & {
  source: string;
  width: string;
  height: string;
  text: string;
};

export function HeroImage() {
  const ref = useRef<EctImageEl | null>(null);

  useEffect(() => {
    const el = ref.current;
    if (el == null) return;

    el.source = 'https://picsum.photos/900/320';
    el.width = '900';
    el.height = '320';
    el.text = 'Hero image';
  }, []);

  return <ect-image ref={ref}></ect-image>;
}

Inputs

Supported input styles:

• Angular-style: Source, Width, Height, Text
• JS-friendly properties: source, width, height, text
• Kebab-case attributes: source, width, height, text

Dependencies

• ect-image
• @angular/elements
• zone.js

Further help

• https://angular-grid.net/

Licence

The licence agreement for this paid component can be found here:

• https://angular-grid.net/assets/licence/licence_agreement.txt