Skip to content
phantom-ui v0.10.0

React

Setup

Section titled “Setup”
npm install @aejkatappaja/phantom-ui

The postinstall script generates a phantom-ui.d.ts file for JSX types automatically.

Usage

Section titled “Usage”
import { useState, useEffect } from "react";
import "@aejkatappaja/phantom-ui";


function UserCard() {
  const [user, setUser] = useState(null);


  useEffect(() => {
    fetchUser().then(setUser);
  }, []);


  return (
    <phantom-ui loading={!user}>
      <div className="card">
        <img src={user?.avatar ?? "/placeholder.png"} className="avatar" />
        <h3>{user?.name ?? "Placeholder Name"}</h3>
        <p>{user?.bio ?? "A short bio goes here for measurement."}</p>
      </div>
    </phantom-ui>
  );
}

Boolean attributes

Section titled “Boolean attributes”

phantom-ui treats loading="false" as falsy, so you can pass booleans directly:

<phantom-ui loading={isLoading}>

TypeScript

Section titled “TypeScript”

If the postinstall did not generate src/phantom-ui.d.ts, create it manually:

import type { PhantomUiAttributes } from "@aejkatappaja/phantom-ui";


declare module "react/jsx-runtime" {
  export namespace JSX {
    interface IntrinsicElements {
      "phantom-ui": PhantomUiAttributes;
    }
  }
}

Or run:

npx @aejkatappaja/phantom-ui init