BrowserUX Share Button

Fonctionnalités

• 🎛 Comportement de partage intelligent

  • Prise en charge de l'API Web Share native
    Utilise la méthode navigator.share() lorsqu'elle est disponible, idéale pour les contextes mobiles et PWA
  • Fallback automatique
    Replie vers une interface modale moderne et tactile lorsque le partage natif n'est pas pris en charge
  • Détection automatique des métadonnées
    Lit automatiquement les métadonnées de partage title, text et url via les attributs HTML, le document, ou le manifeste web
  • Partage multi-plateformes
    Prend en charge Email, SMS, X (Twitter), Facebook, WhatsApp, LinkedIn, Telegram et Reddit
  • Désactivation par plateforme
    Désactivez une ou plusieurs plateformes via des attributs comme facebook="false" ou sms="false"

• 🔧 Expérience développeur

  • Shadow DOM optionnel (no-shadow)
    Rendu en Shadow DOM par défaut ; option de le désactiver pour un style global plus flexible
  • Compatible avec tous les frameworks
    Fonctionne avec tous les frameworks frontend (React, Vue, Angular) ou en HTML pur
  • Léger et optimisé pour le tree-shaking
    Zéro dépendance. Importe uniquement ce dont vous avez besoin, avec types TypeScript inclus
  • Modulaire et typé
    Écrit en TypeScript avec enums SharePlatform typés et utilitaires exportables (getShareIcon, getBestIconUrl)

• ♿ Accessibilité & internationalisation

  • Accessibilité clavier et ARIA
    Modale accessible avec rôles ARIA, piège au focus, et navigation clavier (Escape, Tab, Shift+Tab)
  • Support multilingue (lang)
    Interface et labels ARIA localisés, détectés automatiquement ou définis manuellement via l'attribut lang)
  • Retours visuels et auditifs
    Messages personnalisés pour les succès/erreurs de copie, erreurs de partage ou problèmes d'initialisation

• 🎨 Personnalisation visuelle

  • Variables CSS pour le style
    Personnalisez le bouton et la modale via des propriétés CSS (--bux-share-btn-*, --bux-share-fallback-*, etc.).
  • Contenu personnalisable via slot
    Ajoutez votre propre icône ou libellé dans le bouton principal avec slot name="icon"
  • Animation adaptée au mobile
    Fallback mobile avec effet de glissement vers le haut et possibilité de fermeture par balayage