🌤️ Air Quality Web Component

A lightweight, reusable web component built with Svelte that displays real-time air quality and temperature data by the hour. Easily embeddable into any website with a simple script tag and customizable options.

🔧 Features

• 🌍 Supports hourly data for air quality and temperature
• 📍 Tailored for Sulaimanyah
• 🧩 Works standalone as a Web Component
• ⚡ Lightweight and fast, thanks to Svelte
• 🎨 Theme customization support
• 🔐 Token-based API access

🚀 Demo

Live Preview

⚙️ Configuration

You can customize the component using the following attributes:

| Attribute | Type | Description | Required | Default | Example | | ---------- | ------- | --------------------------------- | -------- | ------- | ---------- | | token | String | API token for data access | ✅ | — | "abc123" | | darkMode | Boolean | Theme mode: light or dark | ❌ | light | "true" | | size | String | sizes:large,medium,small | ❌ | small | "large" | | locale | String | Language code (ar. en, ckb) | ❌ | en | "ckb" |

🧾 Usage

➤ Use via Script Tag

Simply include the script tag in your HTML file like this:

<script
  type="module"
  src="https://iqlabs-air-quality.s3.eu-central-1.amazonaws.com/air-quality-widget.iife.js"
></script>

<air-quality-widget
  token="YOUR_API_TOKEN"
  darkMode="true"
  size="medium"
  locale="ckb"
></air-quality-widget>

If you want to embed the widget inside an iframe, you can use the srcdoc attribute like this:

<iframe
  srcdoc="
    <script
      type='module'
      src='https://iqlabs-air-quality.s3.eu-central-1.amazonaws.com/air-quality-widget.iife.js'>
    </script>

    <air-quality-widget
      token='YOUR_API_TOKEN'
      darkMode='true'
      size='large'
      locale='ckb'>
    </air-quality-widget>
  "
  frameborder="0"
  style="width: 100%; height: 100vh; border: none;"
></iframe>

➤ Install via package manager

If you'd prefer to use the web component as a package in your project, You can install the Air Quality Web Component via one of the following package managers:

➤ npm

npm install air-quality-widget

➤ pnpm

pnpm add air-quality-widget

➤ yarn

yarn add air-quality-widget

➤ bun

bun add air-quality-widget

➤ Svelte Example

<script>
  import "air-quality-widget";
</script>

<air-quality-widget
  token="YOUR_API_TOKEN"
  darkMode="true"
  size="medium"
  locale="ckb"
></air-quality-widget>

➤ React Example

import { useEffect } from "react";

export default function WebComponent() {
  useEffect(() => {
    import("air-quality-widget").then(() => {
      // Wait until it's loaded
      console.log("air-quality-widget is loaded");
    });
  }, []);

  return (
    <div className="w-full relative">
      <air-quality-widget token="RFfrB-W66p9-onf98-LDTVS-D0NsY-uL2nH-KnNGg"></air-quality-widget>
    </div>
  );
}

For TypeScript users, you may need to extend the JSX typings:

declare namespace JSX {
  interface IntrinsicElements {
    "air-quality-widget": React.DetailedHTMLProps<
      React.HTMLAttributes<HTMLElement> & {
        token: string;
        size?: string;
        darkMode?: boolean;
        locale?: string;
      },
      HTMLElement
    >;
  }
}

➤ Vue Example

<script>
  import "air-quality-widget";
</script>
<template>
  <air-quality-widget
    token="YOUR_API_TOKEN"
    darkMode="true"
    size="medium"
    locale="ckb"
  ></air-quality-widget>
</template>

If you are using Vue with a build setup, the option should be passed via build configs since it is a compile-time option.

Example In-Browser Config

app.config.compilerOptions.isCustomElement = (tag) => tag.includes("-");

Example Vite Config

// vite.config.js
import vue from "@vitejs/plugin-vue";

export default {
  plugins: [
    vue({
      template: {
        compilerOptions: {
          // treat all tags with a dash as custom elements
          isCustomElement: (tag) => tag.includes("-"),
        },
      },
    }),
  ],
};

➤ Solid Example

import "air-quality-widget";

function App() {
  return (
    <div>
      <air-quality-widget
        token="YOUR_API_TOKEN"
        darkMode="true"
        size="medium"
        locale="ckb"
      ></air-quality-widget>
    </div>
  );
}

export default App;