@neo4j-ndl/react/skills/ndl-react/components/conditional-wrap.md

React implementation of Neo4j Design System

# ConditionalWrap

Import: `import { ConditionalWrap } from '@neo4j-ndl/react'`

## Props

### ConditionalWrap

| Prop | Type | Required | Default | Description |
|------|------|----------|---------|-------------|
| `children` | `ReactNode` | ✅ |  | The children to potentially wrap |
| `shouldWrap` | `boolean` | ✅ |  | If true, the children will be wrapped |
| `wrap` | `(children: ReactNode) => ReactNode` | ✅ |  | Function that takes children and returns them wrapped in a component |

## Examples

### Default

```tsx
import { StatusLabel, Switch } from '@neo4j-ndl/react';
import { useState } from 'react';

import { ConditionalWrap } from '../ConditionalWrap';

const Component = () => {
  const [shouldWrap, setShouldWrap] = useState(false);

  return (
    <div className="n-flex n-flex-col n-gap-6">
      <Switch
        isChecked={shouldWrap}
        onChange={() => setShouldWrap(!shouldWrap)}
        label="shouldWrap"
      />
      <ConditionalWrap
        shouldWrap={shouldWrap}
        wrap={(children) => <StatusLabel>{children}</StatusLabel>}
      >
        Content
      </ConditionalWrap>
    </div>
  );
};

export default Component;
```