Un système de fenêtres flottantes non modales pour les applications React, sans dépendances et entièrement restylable, extrait de Documinter.
react-pop-a-window est un système de fenêtres flottantes non modales pour React : des panneaux déplaçables et redimensionnables qui accueillent l'interface complète d'un outil pendant que la page derrière eux reste entièrement active. Pas d'arrière-plan, pas de piège de focus, pas de fermeture au clic extérieur : cette non-modalité est tout l'intérêt. Il ne dépend d'aucune bibliothèque à l'exécution et se style entièrement via des propriétés CSS personnalisées.
Il est né de Documinter. J'y avais construit un système de fenêtres flottantes et déplaçables, et une fois qu'il fonctionnait bien, c'était clairement quelque chose que je voudrais réutiliser ailleurs. Alors plutôt que de le copier de projet en projet, j'ai extrait la logique et en ai fait un vrai package autonome.
La bibliothèque se décompose en couches, chacune utilisable sans celle du dessus : une coque qui gère l'habillage de la fenêtre, un hook en dessous qui gère la physique du déplacement et du redimensionnement via les Pointer Events, un utilitaire qui place une fenêtre à côté de ce qui l'a ouverte, et des pièces optionnelles qui coordonnent quelles fenêtres sont ouvertes ou les confinent à un conteneur. Elle reste entièrement contrôlée et sans dépendances, et chaque réglage visuel est une propriété CSS personnalisée avec un thème sombre prêt à l'emploi, si bien qu'elle s'intègre à n'importe quelle application React et en adopte l'apparence.