Ajoutez Liquidify à une application React Router.
Installez Liquidify dans votre projet :
pnpm add @liquidify/reactImportez la feuille de styles dans la route racine ou le point d’entrée client pour la charger une seule fois :
// app/root.tsx
import "@liquidify/react/styles.css"
import { Outlet } from "react-router"
import { Theme } from "@liquidify/react"
export default function Root() {
return (
<Theme type="system">
<Outlet />
</Theme>
)
}Importez les composants dans les modules de route :
import { Button } from "@liquidify/react"
export default function AccountRoute() {
return <Button onClick={() => console.log("saved")}>Enregistrer account</Button>
}Si vous utilisez le rendu serveur, placez la logique qui dépend du navigateur dans des effets. Utilisez les mêmes valeurs contrôlées initiales sur le serveur et le client.