OptionalWrapper

OptionalWrapper is a utility for elegant conditional wrapping. Internally it uses Show to decide whether to apply a wrapper, avoiding nested ternaries or duplicated wrapper code. For example, you can render content wrapped in an a tag when a link is required, or render the content as-is when no wrapper is needed.

function OptionalWrapper(props: {
  when: boolean;
  children: React.ReactNode;
  wrapper: (children: React.ReactNode) => React.ReactNode;
  fallback?: (children: React.ReactNode) => React.ReactNode;
}): React.ReactNode;

Basic usage#

In the simplest case you provide a boolean condition and a wrapper (or 'as' prop); the content will be wrapped only when the condition is true. This pattern is useful for conditionally applying links, tooltips, or other wrappers without duplicating markup.

import { OptionalWrapper } from '@ilokesto/utilinent';

function Post({ post, withLink }) {
  return (
    <OptionalWrapper
      when={withLink}
      wrapper={(children) => <a href={`/posts/${post.id}`}>{children}</a>}
    >
      <h2>{post.title}</h2>
      <p>{post.content}</p>
    </OptionalWrapper>
  );
}