[ @sdxc/u/general ]

if

Conditionally returns input as one mixin, or false when condition is falsy.

View as Markdown Open in GitHub Open in ChatGPT Open in Claude

import { if } from "@sdxc/u/general";

Examples

Basic example

Use u.if(condition, utility) to apply a utility, or a list of them, only when a condition holds; it is written u.if because if is a reserved word:

<nav mix={[hstack({ gap: 1 })]}>
	{["Overview", "Activity", "Settings"].map((tab) => (
		<a
			href={`/${tab.toLowerCase()}`}
			mix={[
				p(2, 3),
				rounded("md"),
				weight("medium"),
				u.if(tab === "Activity", [bg("brand.solid"), fg("brand.onSolid")]),
			]}
		>
			{tab}
		</a>
	))}
</nav>

Styling from data

Conditions can read each record, like u.if(message.unread, weight("semibold")) to set unread messages in bold:

Venue confirmed for the offsitePriya
Re: invoice 2041Marco
Draft of the launch postLena

<ul mix={[maxIs(96), ...]}>
	{[
		{ from: "Priya", subject: "Venue confirmed for the offsite", unread: true },
		{ from: "Marco", subject: "Re: invoice 2041", unread: false },
		{ from: "Lena", subject: "Draft of the launch post", unread: true },
	].map((message) => (
		<li
			mix={[hstack({ gap: 3, justify: "between" }), u.if(message.unread, weight("semibold"))]}
		>
			<span>{message.subject}</span>
			<span mix={[text("sm"), fg("neutral.muted")]}>{message.from}</span>
		</li>
	))}
</ul>

u.if(isActive, u.bg("brand.tint"))

u.if(isActive, [u.bg("brand.solid"), u.fg("brand.onSolid")])

Applying on a state

Wrap the call in a state utility to scope it to one selector.

u.hover(u.if(isActive, u.bg("brand.tint")))

Responsive design

Wrap the call in a container query to scope it to one width.

u.at("md", u.if(isActive, u.bg("brand.tint")))

Signature

u.if(condition: unknown, input: UtilityInput<Node>)