# @cleartrip/ct-design-conditional-wrap

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

Latest version **5.28.0** (published 2026-10-21) · ISC license · 0 weekly downloads

## Install

```sh
npm install @cleartrip/ct-design-conditional-wrap
pnpm add @cleartrip/ct-design-conditional-wrap
yarn add @cleartrip/ct-design-conditional-wrap
bun add @cleartrip/ct-design-conditional-wrap
```

## Health

**Score 65/100 (B)** — status: active.

Positive: has types; esm support; no vulnerabilities; recently updated; high maintenance score.

Warnings: low downloads.

## Facts

| | |
|---|---|
| Version | 5.28.0 |
| Published | 2026-10-21 |
| First published | 2023-10-25 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 8.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Kanishk Gupta |
| Maintainers | rahulct_com, supragya.chauhan, nareshkapse_ct, saranshdawra, ct_devops, sidhantrajan, hello_world_arya, ritesh.kumarjena, mohitjaincleartrip, ashwin.ct, ashokmpatel, amansaxena1, aakrishtmalik, prateek.oraon, ashwin-ui-ct, shashi-kumar |

## Links

- npm: https://www.npmjs.com/package/@cleartrip/ct-design-conditional-wrap
- npm.io page: https://npm.io/package/@cleartrip/ct-design-conditional-wrap

## Dependencies (1)

- [@cleartrip/ct-design-theme](https://npm.io/package/@cleartrip/ct-design-theme.md) 5.28.0

## Recent versions

- 5.28.0 (latest) — 2026-10-21
- 5.27.0-SNAPSHOT-native-main.16 (SNAPSHOT-native-main) — 2026-10-21
- 5.28.0-SNAPSHOT-holiday-packages-bottomsheet-fix.0 (SNAPSHOT-holiday-packages-bottomsheet-fix) — 2026-10-21
- 5.28.0-SNAPSHOT-inter-2.0 (SNAPSHOT-inter-2) — 2026-10-20
- 5.28.0-SNAPSHOT-impression-fix.0 (SNAPSHOT-impression-fix) — 2026-10-16
- 5.28.0-SNAPSHOT-inter-1.0 (SNAPSHOT-inter-1) — 2026-10-14
- 3.32.0-SNAPSHOT-sme-ct-design-common131026.0 (SNAPSHOT-sme-ct-design-common131026) — 2026-10-13
- 5.28.0-SNAPSHOT-figtree-261013-6.0 (SNAPSHOT-figtree-261013-6) — 2026-10-13
- 5.28.0-SNAPSHOT-figtree-261013-5.0 (SNAPSHOT-figtree-261013-5) — 2026-10-13
- 5.28.0-SNAPSHOT-figtree-261013-4.0 (SNAPSHOT-figtree-261013-4) — 2026-10-13
- 5.28.0-SNAPSHOT-figtree-261013-3.0 (SNAPSHOT-figtree-261013-3) — 2026-10-13
- 5.28.0-SNAPSHOT-figtree-261013-2.0 (SNAPSHOT-figtree-261013-2) — 2026-10-13
- 5.28.0-SNAPSHOT-figtree-261013-1.0 (SNAPSHOT-figtree-261013-1) — 2026-10-13
- 5.27.0-SNAPSHOT-biztrip-snapshot-13oct.0 (SNAPSHOT-biztrip-snapshot-13oct) — 2026-10-13
- 3.32.0-SNAPSHOT-sme-ct-design-common061026.0 (SNAPSHOT-sme-ct-design-common061026) — 2026-10-06
- … 942 more at https://npm.io/package/@cleartrip/ct-design-conditional-wrap/versions

## README

# ConditionalWrap

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

---

## Installation

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

### Peer dependencies

```bash
# Required for all targets
npm install react

# Web only
npm install react-dom

# React Native only
npm install react-native
```

---

## Usage

### Basic conditional wrapping

```tsx
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

```tsx
<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

```tsx
<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:

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

### Conditional Tooltips
Add tooltips only when tooltip text exists:

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

### Conditional Form Wrappers
Wrap form elements conditionally:

```tsx
<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:

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

---
_Source: https://npm.io/package/@cleartrip/ct-design-conditional-wrap · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._