regis-tag-me

Web Components with react

· Report Bug · Request Feature ·

• About The Project
  • Installation
• Usage
  • registerWebComponent
  • useWebComponentContext
• Interfaces
  • registerWebComponent
  • WebComponentContext

About The Project

Defines react based custom elements and validates the attributes.

Installation

npm i -D @beuluis/regis-tag-me

Usage

import {
    useWebComponentContext,
    registerWebComponent,
} from "@beuluis/regis-tag-me";
import { z } from "zod";

const MyCustomElement = ({ firstName }: { firstName: string }) => {
    const { containerElement, element, hasShadowDom, stylesContainer } =
        useWebComponentContext();

    return (
        <div>
            Hello {firstName} from {element.tagName}
        </div>
    );
};

registerWebComponent(
    "my-custom-element",
    MyCustomElement,
    z.object({
        firstName: z.string().default("Guest"),
    }),
);

Use the custom tag in your HTML:

<!-- Result: Hello John from MY-CUSTOM-ELEMENT -->
<my-custom-element first-name="John" />

registerWebComponent

Registers a React component as a Web Component (Custom Element) using the given tag name. Takes registerWebComponent as arguments.

useWebComponentContext

Provides a context for the web component. Returns WebComponentContext.

Interfaces

registerWebComponent

• tagName - The name of the custom element
• Component - The React component to render inside the web component
• attributeSchema - Zod schema defining the attributes/props for the component with automatic type conversion for primitives (string, number, boolean, etc.)
• options - Additional configuration options
  • mixin - Optional mixin to extend the web component's functionality
  • shadowDOM - Controls whether to use Shadow DOM
    • If boolean: directly determines Shadow DOM usage
    • If function: dynamically determines Shadow DOM usage based on attributes

WebComponentContext

• containerElement - The element to mount the web component in
• element - The web component element
• hasShadowDom - Whether the web component uses Shadow DOM
• stylesContainer - The element to mount custom styles in