Comment charger un script JS sur React ?

Vous voulez intégrer une librairie JS externe sur votre application React ? Vous avez besoin d’utiliser les variables fournies par ce script ?

Dans ce tutoriel, vous apprendrez comment charger un script externe dynamiquement pour l’utiliser sur votre site développe en React !

Vous voulez en savoir plus sur React JS ? Alors mon aimerez sûrement mon article pour apprendre React

Le code complet pour charger un script JavaScript en React en utilisant les hooks :

const [isLoaded, setLoaded] = React.useState(false)

React.useEffect(() => {
  const baliseScript = document.createElement("script")
  baliseScript.src = "/monscript.com/min.js"
  baliseScript.addEventListener("load", () => setLoaded(true))
  document.body.appendChild(baliseScript)
}, [])

React.useEffect(() => {
  if (isLoaded) {
    // ...
  }
}, [isLoaded])

Maintenant que vous avez le code complet, je vous explique étape par étape comment arriver à ce script final !

Mais avant, je vous dis pourquoi j’ai dû utiliser cette méthode pour charger un script JS sur ce blog.

Récemment, j’ai intégré Ezoic sur ce blog.

💰 Vous voulez monétiser votre blog ? Rejoignez Ezoic, la meilleure régie publicitaire en 2024 !

Comme j’utilise Gatsby, un framework React pour créer des sites et blogs optimisés, j’ai dû passer par une installer moins standard (standalone) que quand on utilise une solution plus standard comme WordPress.

Trêve de bavardages, passons au tutoriel.

Comment créer une balise HTML en JS ?

Le but est d’avoir une balise script comme celle-ci :

<script src="/monscript.com/min.js" type="text/javascript">

Pour créer des balises HTML en JavaScript, on utilise la méthode createElement sur n’importe quel noeud HTML, comme document.

Pour créer une balise script dynamiquement, on peut, utiliser un bout de code comme suit.

const baliseScript = document.createElement("script") // Permet de créer une balise script
baliseScript.src = "/monscript.com/min.js" // Ajoute l'attribut src à la balise script
baliseScript.addEventListener("load", () => {
  console.log("script chargé")
}) // Ajoute un eventListener, qui appliquera un callback quand le script sera chargé
document.body.appendChild(baliseScript) // On insère notre nouveau noeud dans le body

Charger un script au chargement de la page React

En React, le hook useEffect avec un tableau vide comme second paramètre appliquera la fonction callback (premier paramètre) au chargement initial de la page :

React.useEffect(() => {
  const baliseScript = document.createElement("script")
  baliseScript.src = "/monscript.com/min.js"
  baliseScript.addEventListener("load", () => {
    console.log("script chargé")
  })
  document.body.appendChild(baliseScript)
}, [])

C’est bien, on peut charger le script, mais si vous voulez utiliser une variable de ce dit script et que vous le faites trop tôt, votre application React pourrait ne pas encore y avoir accès et vous vous retrouverez avec une erreur variable ou méthode undefined.

Il faut donc trouver un moyen d’attendre que le script soit bien chargé avant de l’utiliser dans notre code.

Attendre que le script soit chargé pour l’utiliser

En React, le hook useEffect avec un tableau contenant une ou plusieurs variables comme second paramètre appliquera la fonction callback (premier paramètre) au chargement de la ou les variables contenues dans le tableau :

const [isLoaded, setLoaded] = React.useState(false)

React.useEffect(() => {
  if (isLoaded) {
    // ...
  }
}, [isLoaded])

On a maintenant un Hook pour créer un node html et charger le script. On va modifier la méthode addEventListener pour prévenir notre application que le script est correctement chargé et qu’on peut utiliser son contenu.

baliseScript.addEventListener('load', () => setLoaded(true));

Le code complet

Félicitations, vous savez maintenant comment charger un script JS externe dans votre site React !

Si on met toutes les étapes ensemble, voici le snippet complet.

Il vous faudra changer l’URL du script externe que vous voulez charger, ici /monscript.com/min.js.

const [isLoaded, setLoaded] = React.useState(false)

React.useEffect(() => {
  const baliseScript = document.createElement("script")
  baliseScript.src = "/monscript.com/min.js"
  baliseScript.addEventListener("load", () => setLoaded(true))
  document.body.appendChild(baliseScript)
}, [])

React.useEffect(() => {
  if (isLoaded) {
    // ...
  }
}, [isLoaded])