# Wrap

Wrap legt ein Element nur dann um seinen Content, wenn eine Bedingung erfüllt ist. Andernfalls wird nur der Content gerendert.

> **mStudio-Extensions:** Importiere `Wrap` aus `@mittwald/flow-remote-react-components`. Die Beispiele auf dieser Seite importieren aus `@mittwald/flow-react-components`, das in einer Extension nicht rendert.

```tsx
import {
  Link,
  Section,
  Switch,
  Text,
  Wrap,
} from "@mittwald/flow-react-components";
import { useState } from "react";

export default () => {
  const [isLinked, setIsLinked] = useState(true);

  return (
    <Section>
      <Switch isSelected={isLinked} onChange={setIsLinked}>
        Projekt verlinken
      </Switch>
      <Wrap if={isLinked}>
        <Link href="#">
          <Text>Webshop Relaunch</Text>
        </Link>
      </Wrap>
    </Section>
  );
}
```

---

# Best Practices

- Setze das optionale Element direkt in Wrap und deinen Content in dieses
  Element. Ist die Bedingung nicht erfüllt, entfällt nur das Element. Der
  Content bleibt sichtbar und steht trotzdem nur einmal im Code.

---

# Properties

| Property | Type | Default | Description |
| --- | --- | --- | --- |
| `children` _(required)_ | `ReactNode` | - | The element that wraps the content, with the content as its children. |
| `if` _(required)_ | `unknown` | - | Whether the child element is rendered. Any truthy value keeps it, a falsy one renders only its children. |