Quizzie Module

Embeddable Quizzie module distributed as a Web Component.

Install

npm install @kakarot2905/quizzie-module

Usage in any web app

Render directly in plain HTML with an ES module script:

<div id="quiz-root"></div>
<script type="module">
  import { loadQuizzieModule, elementTag } from "@kakarot2905/quizzie-module";

  await loadQuizzieModule();

  const host = document.getElementById("quiz-root");
  host.innerHTML = `<${elementTag}></${elementTag}>`;
</script>

Usage in React

1. Install the package:

npm install @kakarot2905/quizzie-module

2. Load and render the custom element in a React component:

import { useEffect, useRef } from "react";
import { loadQuizzieModule, elementTag } from "@kakarot2905/quizzie-module";

export default function QuizzieEmbed() {
  const hostRef = useRef(null);

  useEffect(() => {
    (async () => {
      await loadQuizzieModule();
      const host = hostRef.current;
      if (!host) return;

      const quizElement = document.createElement(elementTag);
      host.replaceChildren(quizElement);
    })();
  }, []);

  return <div ref={hostRef} />;
}

3. (Optional) If your React app is TypeScript, add this to avoid JSX type errors for custom elements:

// src/custom-elements.d.ts
import type React from "react";

declare namespace JSX {
  interface IntrinsicElements {
    "quizzie-module": React.DetailedHTMLProps<
      React.HTMLAttributes<HTMLElement>,
      HTMLElement
    >;
  }
}

Then you can render it directly:

import { useEffect } from "react";
import { loadQuizzieModule } from "@kakarot2905/quizzie-module";

export default function QuizzieEmbed() {
  useEffect(() => {
    loadQuizzieModule();
  }, []);

  return <quizzie-module />;
}

Using local build in a React demo app

If you are testing locally before publishing:

From frontend in this repository:

npm run prepare:npm-lib

From your React/Vite demo app:

npm install "C:/Users/sudha/Desktop/Myself/programing/git/Quizzie/frontend/dist/npm-lib"

Optional: Load from CDN

<script type="module">
  import { loadQuizzieModule, elementTag } from "https://unpkg.com/@kakarot2905/quizzie-module/loader.js";

  await loadQuizzieModule();
  document.body.innerHTML += `<${elementTag}></${elementTag}>`;
</script>

Build and pack locally

From the frontend project root:

npm run pack:npm-lib

This creates a .tgz package in the current directory.

Publish

1. Update package name and version in npm-lib/package.json.
2. Login to npm: npm login.
3. Publish:

npm run publish:npm-lib