diff --git a/src/components/For.tsx b/src/components/For.tsx
index 9c8ff9c..21a595d 100644
--- a/src/components/For.tsx
+++ b/src/components/For.tsx
@@ -5,6 +5,20 @@ export type ForProps = {
children: (item: T, index: number) => React.ReactNode;
};
+/**
+ * Renders a list by mapping each item to JSX with a render function.
+ *
+ * @example
+ * ```tsx
+ *
+ * {(user, index) => (
+ *
+ * {index + 1}. {user.name}
+ *
+ * )}
+ *
+ * ```
+ */
export function For(props: ForProps) {
return <>{props.each.map((item, i) => props.children(item, i))}>;
}
diff --git a/src/components/Match.tsx b/src/components/Match.tsx
index 01d886e..ba8a7a9 100644
--- a/src/components/Match.tsx
+++ b/src/components/Match.tsx
@@ -5,6 +5,20 @@ export type MatchProps = {
children: React.ReactNode;
};
+/**
+ * Renders children only when `when` is truthy.
+ *
+ * @remarks
+ * `Match` is typically used inside `Switch`.
+ * For standalone conditional rendering, consider `Show`.
+ *
+ * @example
+ * ```tsx
+ *
+ * Admin panel
+ *
+ * ```
+ */
export function Match(props: MatchProps) {
return <>{props.when ? props.children : null}>;
}
diff --git a/src/components/Show.tsx b/src/components/Show.tsx
index 106a0c2..4d83724 100644
--- a/src/components/Show.tsx
+++ b/src/components/Show.tsx
@@ -6,6 +6,16 @@ export type ShowProps = {
children: React.ReactNode;
};
+/**
+ * Conditionally renders children when `when` is truthy, otherwise renders `fallback`.
+ *
+ * @example
+ * ```tsx
+ * Loading...
}>
+ * Welcome back!
+ *
+ * ```
+ */
export function Show(props: ShowProps) {
return props.when ? <>{props.children}> : <>{props.fallback}>;
}
diff --git a/src/components/Switch.tsx b/src/components/Switch.tsx
index 4119c77..b54326f 100644
--- a/src/components/Switch.tsx
+++ b/src/components/Switch.tsx
@@ -1,6 +1,18 @@
import React from "react";
import { Match, MatchProps } from "./Match";
+/**
+ * Renders the children of the first `Match` child whose `when` prop is truthy.
+ *
+ * @example
+ * ```tsx
+ *
+ * Loading...
+ * Done!
+ * Something went wrong.
+ *
+ * ```
+ */
export function Switch(props: { children: React.ReactNode }) {
const children = React.Children.toArray(props.children);