Astro avec React

Utilisez des contrôles Liquidify interactifs avec l’intégration React d’Astro.

Ajoutez l’intégration React si elle n’est pas encore configurée, puis installez Liquidify :

Code
pnpm astro add react
pnpm add @liquidify/react

Îlot React

Créez un îlot React et importez la feuille de styles depuis ce composant ou un layout partagé :

Code
// src/components/SaveControl.tsx
import { Button } from "@liquidify/react"
import "@liquidify/react/styles.css"

export function SaveControl() {
return <Button onClick={() => console.log("saved")}>Enregistrer changes</Button>
}

Hydratation

Choisissez la directive d’hydratation selon l’interaction nécessaire :

Code
---
import { SaveControl } from "../components/SaveControl"
---

<SaveControl client:visible />

Utilisez client:load pour les contrôles qui doivent répondre immédiatement, et client:visible pour le contenu hors de la vue initiale. Sans directive client, le composant produit du HTML statique et ne répond pas aux interactions.