Skip to content
staticview

React 18 and earlier

TypeScript Configuration

Add the Web Component types to your TypeScript configuration:

tsconfig.json
{
  "compilerOptions": {
    "types": [
      // Required: Enables JSX type support for React 18 and earlier
      // Or a single component: "@staticview/ui/types/react18/[component-name]"
      "@staticview/ui/types/react18",


      // Optional: Adds native DOM types (e.g. `querySelector`, `document`)
      // Or a single component: "@staticview/ui/types/dom/[component-name]"
      "@staticview/ui/types/dom",


      // Optional: Exposes component types globally (no imports needed)
      // Or a single component: "@staticview/ui/types/global/[component-name]"
      "@staticview/ui/types/global",
    ],
  },
}

This provides TypeScript support for the web components in your React application.

Importing Web Components

Web components are registered globally in the browser. Import them once in your application's entry point:

app.tsx
import "@staticview/ui/[component-name]";

Important: Do not import web components in multiple files. them only once at application startup.

Using Components with React 18 and earlier

React 18 and earlier does not support setting JavaScript properties or attaching events using JSX, its only support setting HTML attributes. To attach events or settings JavaScript properties use the native DOM API via react ref.

Boolean Attributes

A boolean attribute is on whenever it is present, whatever its value: close-button="false" turns the close button on. React 18 keeps boolean values on custom elements and stringifies them, so close-button={false} also renders close-button="false". Pass "" to turn it on, and omit the attribute — or pass undefined — to turn it off:

<component-name close-button={hasCloseButton ? "" : undefined}></component-name>

Using Slots

Use children to render the content of the web component:

<component-name>
  <span slot="title">Title</span>
  <span>Content</span>
</component-name>