Splendid astro

If

If lets you render content based on a condition.

Easier conditional rendering

The If component is easier to easier to use when compared to the standard JSX style that Astro requires.

<If condition={true}>
  <div>Markup goes here</div>
</If>

Use the else slot for falsey conditions

The If component renders the else slot when the condition is falsey, so you can use if/else instead of a chunk of JSX.

<If condition={true}>
  <div>Renders when true</div>
  <div slot="else">Renders when false</div>
</If>