React package reference

Install:

npm

npm i @skullmaster/react@beta @skullmaster/react@next

pnpm

pnpm add @skullmaster/react@beta @skullmaster/react@next

yarn

yarn add @skullmaster/react@beta @skullmaster/react@next

Skullmaster (provider)

Mount once in your app entry (App.tsx, main.tsx, or layout.tsx):

import { Skullmaster } from "@skullmaster/react";

<Skullmaster />;

Dev-only helper: enables the skull icon, hover highlighting of data-skullmaster elements, and the download button that posts the payload to the CLI server.

markAsSkull(name, tweaks?)

Registers an element for skeleton generation. The name becomes the skeleton file name (<outDir>/skeletons/<name>.tsx).

<article {...markAsSkull("UserCard")}>...</article>
<section {...markAsSkull("Hero", { isTransparent: true })}>...</section>

tweakForSkull(tweaks?)

Applies tweaks to a child element without registering a new name:

<fieldset {...tweakForSkull({ hideSubTree: true })}>...</fieldset>

SkullTweaks

type SkullTweaks = {
  hideSubTree?: boolean; // -> data-skip-skull
  isTransparent?: boolean; // -> data-depth="-1"
};

Generated registry

<outDir>/registry.tsx exports Skeleton:

import { Skeleton } from "./skeletons/registry";

<Skeleton name="ProfileCard" />;

Renders DefaultBone until the named skeleton exists.