When.tsx

import { ReactNode } from 'react';

/**
 * Component that conditionally renders children based on a value
 * @param props.value - Value to check
 * @param props.children - Content to render, either direct ReactNode or function that receives the value
 * @param props.condition - Optional custom condition function
 * @returns Rendered children or null
 * @example
 * <When value={user}>
 *   {user => <div>Welcome {user.name}</div>}
 * </When>
 */
export function When<T>(props: {
  value: T;
  children?: ((value: NonNullable<T>) => ReactNode) | ReactNode;
  condition?: (value: T, defaultCheck?: (value: T) => boolean) => boolean;
}): ReactNode {
  const defaultCheck = (value: T) => value != null && value !== false;

  const { value, children, condition = defaultCheck } = props;

  if (!condition(value, defaultCheck)) {
    return null;
  }

  return typeof children === 'function'
    ? children(value as NonNullable<T>)
    : children;
}