@cleartrip/ct-design-conditional-wrap

ConditionalWrap

ConditionalWrap conditionally wraps children with a wrapper component based on a boolean condition.

---

Installation

npm install @cleartrip/ct-design-conditional-wrap
# or
pnpm add @cleartrip/ct-design-conditional-wrap

Peer dependencies

# Required for all targets
npm install react

# Web only
npm install react-dom

# React Native only
npm install react-native

---

Usage

Basic conditional wrapping

import ConditionalWrap from '@cleartrip/ct-design-conditional-wrap';

function Example({ hasLink }: { hasLink: boolean }) {
  return (
    <ConditionalWrap
      condition={hasLink}
      wrap={(children) => <a href="/link">{children}</a>}
    >
      <span>This may or may not be wrapped in a link</span>
    </ConditionalWrap>
  );
}

Conditional styling wrapper

<ConditionalWrap
  condition={isHighlighted}
  wrap={(children) => (
    <div style={{ backgroundColor: 'yellow', padding: 8 }}>
      {children}
    </div>
  )}
>
  <div>Content that might be highlighted</div>
</ConditionalWrap>

Modal or dialog wrapper

<ConditionalWrap
  condition={showInModal}
  wrap={(children) => (
    <div className="modal-overlay">
      <div className="modal-content">
        {children}
      </div>
    </div>
  )}
>
  <div>Content that may appear in a modal</div>
</ConditionalWrap>

---

Props

Prop	Type	Default	Required	Description
condition	boolean	—	Yes	Boolean condition that determines whether to apply the wrapper
wrap	(component: ReactElement) => ReactElement	—	Yes	Function that wraps the children when condition is true
children	ReactElement	—	Yes	The child element to conditionally wrap

---

Use Cases

Conditional Links

Wrap text in a link only when a URL is provided:

<ConditionalWrap
  condition={!!url}
  wrap={(children) => <a href={url}>{children}</a>}
>
  <span>{linkText}</span>
</ConditionalWrap>

Conditional Tooltips

Add tooltips only when tooltip text exists:

<ConditionalWrap
  condition={!!tooltipText}
  wrap={(children) => (
    <div title={tooltipText}>
      {children}
    </div>
  )}
>
  <button>Action Button</button>
</ConditionalWrap>

Conditional Form Wrappers

Wrap form elements conditionally:

<ConditionalWrap
  condition={isDisabled}
  wrap={(children) => (
    <fieldset disabled>
      {children}
    </fieldset>
  )}
>
  <input type="text" />
</ConditionalWrap>

---

Behavior

• When condition is true, the wrap function is called with children as argument
• When condition is false, children are returned unchanged
• The component is a pure function with no side effects
• Only accepts a single child element (ReactElement)

---

Performance

• Very lightweight component with minimal overhead
• No state or effects, purely functional
• Wrapper function is only called when condition is true
• Consider memoizing the wrap function if it's expensive to create

---

Migration

If migrating from a previous version:

- import { ConditionalWrap } from 'old-package';
+ import ConditionalWrap from '@cleartrip/ct-design-conditional-wrap';