Skip to main content

Importing in your project

GitHub repository

From a CDN​

If you just want to quickly try out the web component, you can get it from a CDN:

<html>
  <head>
    <!-- Polyfill for Safari, see https://github.com/ungap/custom-elements -->
    <script src="https://unpkg.com/@ungap/custom-elements/es.js"></script>
  </head>

  <body>
    <img
      is="image-display-control"
      src="https://webc.frameright.io/assets/pics/skater.jpg"
      width="200"
      height="200"
      data-image-regions='[{
        "id": "horizontalbanner",
        "names": ["Horizontal banner"],
        "shape": "rectangle",
        "unit": "pixel",
        "imageWidth": "5760",
        "imageHeight": "3840",
        "x": "2343",
        "y": "858",
        "width": "3417",
        "height": "1281"
      }, {
        "id": "square",
        "names": ["Square"],
        "shape": "rectangle",
        "unit": "pixel",
        "imageWidth": "5760",
        "imageHeight": "3840",
        "x": "2462",
        "y": "1097",
        "width": "782",
        "height": "782"
      }, {
        "id": "tallportrait",
        "names": ["Tall portrait"],
        "shape": "rectangle",
        "unit": "pixel",
        "imageWidth": "5760",
        "imageHeight": "3840",
        "x": "2345",
        "y": "850",
        "width": "1122",
        "height": "2990"
      }]'
    />

    <script
      type="module"
      src="https://cdn.jsdelivr.net/npm/@frameright/image-display-control-web-component@1.1.8/dist/image-display-control.min.js"
    ></script>
  </body>
</html>

Inside a project with a bundler​

Provided that you are using a bundler (e.g. Webpack or Rollup), you can add the web component to your project with:

npm install @frameright/image-display-control-web-component

Less than 20kB in your final client-side bundle.

and then import it in your front-end code with:

import '@frameright/image-display-control-web-component/image-display-control.js';

This React component is an example of doing that.

Inside a Vite project​

If you are using Vite, you can serve the web component's to the front-end by simply importing it in your React component's implementation:

src/MyComponent.tsx
import "@frameright/image-display-control-web-component/image-display-control.js";

export default function MyComponent() {
  return (
    <img is="image-display-control" ... />
  );
}

With SSR​

If you are using vite-plugin-ssr, you can serve the web component's code to the front-end by conditionally importing it in your React component's implementation:

src/MyComponent.tsx
// Import only in the browser, not in the back-end
if (typeof window !== "undefined") {
  // Defines the <img is="image-display-control"> web component.
  import(
    "@frameright/image-display-control-web-component/dist/src/image-display-control.js"
  );
}

export default function MyComponent() {
  return (
    <img is="image-display-control" ... />
  );
}

Inside a Next.js project​

If you are using Next.js, you can serve the web component's code inside the front-end bundles generated by Next.js, by conditionally importing it in your page's implementation:

// pages/mypage.tsx

// Your normal imports, e.g.
import Image from "next/image";

// Import only in the browser, not in the back-end
if (typeof window !== "undefined") {
  import(
    "@frameright/image-display-control-web-component/dist/src/image-display-control.js"
  );
}

// Your page's implementation
export default function MyPage() {
  return (
    <Image is="image-display-control" ... />
  );
}

See also these StackOverflow answers to: