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);