Composable : useBreakpoint — détection de breakpoint
titre: “Composable : useBreakpoint — détection de breakpoint” tagline: “Un petit composable réactif pour détecter le breakpoint courant et adapter l’UI responsive (utilisé par la nouvelle UI e‑invoicing).” icon: “lucide:device-mobile” background: “surface”
type: “info” title: “Pourquoi ce composable ?” Le nouveau UI responsive (module e‑invoicing) a besoin d’une API simple et testable pour connaître le breakpoint courant (comme “sm”, “md”, “lg”) et réagir proprement côté composant. useBreakpoint encapsule la logique basée sur matchMedia / resize, gère le SSR et fournit des helpers pratiques (is, up, down, matches).
type: “warning” title: “Note sur l’accessibilité des breakpoints” Le composable donne un aperçu de la largeur et du breakpoint — il ne remplace pas les bonnes pratiques CSS (media queries). Utilisez‑le pour adapter la logique JS (affichage conditionnel, comportement de composants), pas pour simuler tout le CSS côté JS.
type: “tip” title: “Intégration avec Tailwind / classes CSS” Si vous utilisez Tailwind, alignez les clés et valeurs des breakpoints du composable sur votre configuration Tailwind pour éviter toute confusion (ex: sm, md, lg, xl). Ainsi, is(‘md’) correspondra intuitivement à la même limite que vos classes CSS.
type: “success” title: “Résumé” useBreakpoint fournit une API simple et fiable pour connaître le breakpoint courant, ses correspondances et réagir aux changements de viewport. Il est pensé pour être utilisé par la nouvelle UI responsive (e‑invoicing) mais reste générique et configurable pour d’autres parties de l’application.
title: “Besoin d’exemples supplémentaires ?” body: “Si vous voulez, je peux ajouter des snippets prêts à coller (TypeScript + template) pour les cas courants : barre latérale, menu mobile, cartes adaptatives, ou tests unitaires.” button: “Oui, ajouter des snippets” href: “#”