ShadowJSShadowJSv1.0.0
[]previous and next page

The class attribute

class accepts a string, an array, or an object, nested to any depth.

For agentsUpdated

class accepts a string, an array, or an object, nested to any depth. Strings and numbers are kept; null, undefined, false and "" are dropped; an object contributes its keys whose value is truthy. classList toggles keys by truthiness and class:name toggles one class. Only the classes whose condition changed are touched.

src/classes.tsxtsx
import { useStore } from "@shadow-js/core";

export function Classes() {
  const [active] = useStore(true);
  const [loading] = useStore(false);
  return (
    <div
      data-testid="box"
      class={[
        "p-4 rounded-lg",
        "bg-white shadow-md",
        active() && "text-sm",
        loading() && "opacity-50",
        { flex: true, "items-center": active(), hidden: false },
        [null, undefined, "hover:bg-gray-50"],
      ]}
      classList={{ "font-bold": active() }}
    />
  );
}