‍

Components

Integrations

Wrap

Wrap legt ein Element nur dann um seinen Content, wenn eine Bedingung erfüllt ist. Andernfalls wird nur der Content gerendert.
Webshop Relaunch‍
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

PropertyTypeDescription
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.

Auf dieser Seite