disabling client directives

[iron ice]

I've asked before in this line, about making client direcctives conditional, but the use situation has simpliried, to just using a client directive or not.

In other words, I need this example component to work in two fashions, dependent on a variable set at runtime:

<Example aprop={aprop} client:load="react" />,
but also needs to act as if written
<Example aprop={aprop} />,
according to some variable conditioning it

At present, can work around by duplicating lines with conditions, but...

I have two results cases, wanting the same code to work for a deployed static site, where no client action is invited, and React causes hydration mismatch which for architectural reasons must occur; and for the content deveopment case, where the client is very active indeed, using load because prehydration smooths it.

tagging: not a match there, but react is involved at moment, so closest

[white depot]

You'll probably want a wrapper component I guess:

---
import Example, { type Props as ExampleProps } from "./Example"

interface Props extends ExampleProps {
  interactive?: boolean
}

const { interactive = false, ...props } = Astro.props
---

{interactive
  ? <Example {...props} client:load />
  : <Example {...props} />
}