Aller au contenu principal

NewWindow

Le composant NewWindow permet d'ouvrir le contenu d'une application React dans une fenêtre navigateur séparée. Il supporte le copie automatique des styles CSS, la gestion du positionnement et la synchronisation des états, idéal pour :

  • Ouvrir des aperçus détaillés dans des fenêtres flottantes
  • Créer des éditeurs ou formulaires dans des fenêtres dédiées
  • Implémenter des dashboards multi-fenêtres
  • Afficher des prévisualisations séparées
  • Gérer des workflows d'édition avancés avec interface indépendante

Le composant offre une expérience utilisateur fluide avec fermeture automatique des fenêtres, copie des styles et gestion complète du cycle de vie de la fenêtre.

Utilisation basique​

Affiche un bouton pour déclencher l'ouverture d'une nouvelle fenêtre contenant du contenu React.

import { NewWindow, NewWindowTrigger, NewWindowContent } from '@/components/new-window';

export default function Component() {
  return (
    <NewWindow name="preview">
      <NewWindowTrigger>Ouvrir la prévisualisation</NewWindowTrigger>
      <NewWindowContent>
        <div className="p-8">
          <h1>Contenu de la nouvelle fenêtre</h1>
          <p>Ce contenu s'affiche dans une fenêtre séparée</p>
        </div>
      </NewWindowContent>
    </NewWindow>
  )
}

Utilisation avec titre personnalisé​

Ajoute un titre personnalisé à la fenêtre navigateur.

import { NewWindow, NewWindowTrigger, NewWindowContent } from '@/components/new-window';

export default function Component() {
  return (
    <NewWindow name="preview" title="Mon Aperçu Personnalisé">
      <NewWindowTrigger>Ouvrir la prévisualisation</NewWindowTrigger>
      <NewWindowContent>
        <div className="p-8">
          <h1>Contenu de la nouvelle fenêtre</h1>
        </div>
      </NewWindowContent>
    </NewWindow>
  )
}

Utilisation avec positionnement personnalisé​

Configure la position et la taille de la fenêtre lors de son ouverture.

import { NewWindow, NewWindowTrigger, NewWindowContent } from '@/components/new-window';

export default function Component() {
  return (
    <NewWindow 
      name="preview"
      width={800}
      height={600}
      left={100}
      top={100}
    >
      <NewWindowTrigger>Ouvrir la prévisualisation</NewWindowTrigger>
      <NewWindowContent>
        <div className="p-8">
          <h1>Contenu de la nouvelle fenêtre</h1>
        </div>
      </NewWindowContent>
    </NewWindow>
  )
}

Utilisation avec centrage​

Centre automatiquement la fenêtre par rapport à la fenêtre parent.

import { NewWindow, NewWindowTrigger, NewWindowContent } from '@/components/new-window';

export default function Component() {
  return (
    <NewWindow 
      name="preview"
      width={800}
      height={600}
      centered={true}
    >
      <NewWindowTrigger>Ouvrir la prévisualisation centrée</NewWindowTrigger>
      <NewWindowContent>
        <div className="p-8">
          <h1>Contenu de la nouvelle fenêtre</h1>
        </div>
      </NewWindowContent>
    </NewWindow>
  )
}

Utilisation avec bouton personnalisé​

Utilise asChild pour rendre le déclencheur sur un élément personnalisé plutôt qu'un bouton.

import { NewWindow, NewWindowTrigger, NewWindowContent } from '@/components/new-window';
import { Eye } from 'lucide-react';

export default function Component() {
  return (
    <NewWindow name="preview">
      <NewWindowTrigger asChild>
        <button className="custom-button">
          <Eye />
          Aperçu
        </button>
      </NewWindowTrigger>
      <NewWindowContent>
        <div className="p-8">
          <h1>Contenu de la nouvelle fenêtre</h1>
        </div>
      </NewWindowContent>
    </NewWindow>
  )
}

Utilisation sans styles automatiques​

Désactive la copie automatique des styles CSS du document parent.

import { NewWindow, NewWindowTrigger, NewWindowContent } from '@/components/new-window';

export default function Component() {
  return (
    <NewWindow 
      name="preview"
      noStyle={true}
    >
      <NewWindowTrigger>Ouvrir sans styles</NewWindowTrigger>
      <NewWindowContent>
        <div style={{ padding: '2rem' }}>
          <h1>Contenu sans styles du parent</h1>
        </div>
      </NewWindowContent>
    </NewWindow>
  )
}

Gestion automatique des styles CSS​

Le composant copie automatiquement tous les styles CSS du document parent vers la nouvelle fenêtre, incluant :

  • Styles internes : Règles CSS définies dans des balises <style>
  • Styles externes : Feuilles de style liées via des balises <link>
  • Animations : Règles @keyframes et animations CSS
  • Polices personnalisées : Règles @font-face avec URLs corrigées
  • Imports CSS : Règles @import avec URLs corrigées

La copie des styles se fait automatiquement lors de l'ouverture de la fenêtre et gère les erreurs CORS gracieusement.

Gestion du cycle de vie​

Le composant gère automatiquement :

  • Fermeture de la fenêtre enfant quand la fenêtre parent est fermée
  • Mise à jour de l'état si l'utilisateur ferme manuellement la fenêtre
  • Nettoyage des écouteurs d'événements
  • Création et destruction du conteneur DOM

Référence API​

NewWindow​

PropTypeDefaultDescription
namestring-Nom unique de la fenêtre utilisé par window.open(). Requis
titlestring-Titre personnalisé de la fenêtre (affiché dans la barre de titre du navigateur)
widthnumber600Largeur de la fenêtre en pixels
heightnumber400Hauteur de la fenêtre en pixels
leftnumber100Position horizontale de la fenêtre en pixels (ignorée si centered est true)
topnumber100Position verticale de la fenêtre en pixels (ignorée si centered est true)
centeredbooleanfalseCentre la fenêtre par rapport à la fenêtre parent au lieu d'utiliser left et top
noStylebooleanfalseDésactive la copie automatique des styles CSS du parent vers la nouvelle fenêtre
childrenReactNode-Contenu du composant, doit inclure NewWindowTrigger et NewWindowContent

NewWindowTrigger​

PropTypeDefaultDescription
asChildbooleanfalseSi true, rend le déclencheur sur l'enfant plutôt que sur un bouton
childrenReactNode-Contenu du déclencheur (texte, icône, ou élément personnalisé)
...propsReact.ComponentProps<'button'>-Props standard HTML du bouton (className, style, etc.)

NewWindowContent​

PropTypeDefaultDescription
childrenReactNode-Contenu à afficher dans la nouvelle fenêtre

Typescript​

NewWindowProps​

interface NewWindowProps extends React.PropsWithChildren {
  height?: number;           // Hauteur de la fenêtre (défaut: 400)
  width?: number;            // Largeur de la fenêtre (défaut: 600)
  left?: number;             // Position horizontale (défaut: 100)
  top?: number;              // Position verticale (défaut: 100)
  centered?: boolean;        // Centre la fenêtre (défaut: false)
  title?: string;            // Titre personnalisé de la fenêtre
  name: string;              // Nom unique de la fenêtre (requis)
  noStyle?: boolean;         // Désactive la copie de styles (défaut: false)
  asChild?: boolean;         // Pour NewWindowTrigger uniquement
}

Gestion des erreurs​

Le composant gère gracieusement plusieurs scénarios d'erreur :

  • Fenêtre bloquée : Si window.open() retourne null (fenêtres popup bloquées), un message d'erreur est affiché dans la console
  • Erreurs CORS : Les styles CSS externes avec CORS restreint sont capturés et ignorés
  • Fermeture de fenêtre : L'état interne est mis à jour si l'utilisateur ferme manuellement la fenêtre

Performance et optimisations​

  • Création du conteneur DOM au montage du composant
  • Copie des styles effectuée de manière asynchrone (setTimeout 0)
  • Nettoyage complet des ressources lors du démontage
  • Support de portalisation React pour le rendu en fenêtre séparée