{"id":5988,"date":"2024-10-10T09:24:18","date_gmt":"2024-10-10T09:24:18","guid":{"rendered":"https:\/\/wikiform.fr\/codespace\/ajouter-effet-hover-styled-components-react\/"},"modified":"2024-10-10T09:24:23","modified_gmt":"2024-10-10T09:24:23","slug":"ajouter-effet-hover-styled-components-react","status":"publish","type":"post","link":"https:\/\/wikiform.fr\/codespace\/ajouter-effet-hover-styled-components-react\/","title":{"rendered":"7.11 Ajouter un Effet Hover avec Styled Components React"},"content":{"rendered":"\u00ab\u00a0`html\n\n<p><strong>Effet Hover Styled Components React<\/strong> est une technique tr\u00e8s utile pour am\u00e9liorer l\u2019interactivit\u00e9 et l\u2019effet visuel de vos applications web. Gr\u00e2ce \u00e0 <strong>Styled Components<\/strong>, vous pouvez cr\u00e9er des composants React qui poss\u00e8dent une apparence dynamique personnalisable. D\u00e9couvrons comment impl\u00e9menter un effet hover simple et efficace pour rendre vos interfaces utilisateur plus attrayantes.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction aux <strong>Styled Components en React<\/strong><\/h2>\n\n\n\n<div id=\"videoContainer\" style=\"position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; background: #000;\">\n  <iframe src=\"https:\/\/player.vimeo.com\/video\/706092175?dnt=1&#038;fullscreen=0&#038;pip=0\" loading=\"lazy\" loading=\"lazy\" style=\"position: absolute; top: 0; left: 0; width: 100%; height: 100%;\" frameborder=\"0\" allow=\"autoplay\" allowfullscreen id=\"vimeoPlayer\"><\/iframe>\n  \n  <!-- Popup Desktop -->\n  <div id=\"popupContainer\" class=\"desktop-popup\" style=\"display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 90%; max-width: 400px; padding: 20px; border-radius: 10px; text-align: center; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); background-color: rgba(255, 255, 255, 0.95); box-sizing: border-box;\">\n    <h2 style=\"color: #333; font-size: 1.5em; margin: 10px 0;\" id=\"profitez-de-loffre-spciale-\">Profitez de l\u2019offre sp\u00e9ciale !<\/h2>\n    <p style=\"color: #e74c3c; font-size: 1.2em; margin: 10px 0;\">Obtenez notre cours pour seulement <strong id=\"price\">29.5\u20ac<\/strong> au lieu de <del>59\u20ac<\/del> !<\/p>\n    <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/cr%C3%A9er-des-sites-interactifs-avec-react-et-redux\/143\" target=\"_blank\" style=\"display: block; padding: 10px 20px; background-color: #701CF5; color: #fff; text-decoration: none; border-radius: 5px; font-weight: bold; font-size: 1em; margin: 20px auto;\" rel=\"noopener\">Commencer maintenant<\/a>\n    <button onclick=\"closePopup()\" style=\"padding: 10px 20px; font-size: 1em;\">Fermer<\/button>\n  <\/div>\n\n  <!-- Popup Mobile -->\n  <div id=\"popupContainerMobile\" class=\"mobile-popup\" style=\"display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 80%; max-width: 300px; padding: 15px; border-radius: 10px; text-align: center; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); background-color: rgba(255, 255, 255, 0.95); box-sizing: border-box;\">\n    <p style=\"color: #e74c3c; font-size: 1em; margin: 5px 0;\">Cours sp\u00e9cial \u00e0 <strong id=\"priceMobile\">29.5\u20ac<\/strong> au lieu de <del>59\u20ac<\/del> !<\/p>\n    <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/cr%C3%A9er-des-sites-interactifs-avec-react-et-redux\/143\" target=\"_blank\" style=\"display: inline-block; padding: 8px 15px; background-color: #701CF5; color: #fff; text-decoration: none; border-radius: 5px; font-weight: bold; font-size: 0.9em;\" rel=\"noopener\">Commencer maintenant<\/a>\n    <button onclick=\"closePopup()\" style=\"padding: 5px 10px; font-size: 0.9em;\">Fermer<\/button>\n  <\/div>\n<\/div>\n\n<script src=\"https:\/\/player.vimeo.com\/api\/player.js\"><\/script>\n<script>\ndocument.addEventListener('DOMContentLoaded', function() {\n    var iframe = document.getElementById('vimeoPlayer');\n    var player = new Vimeo.Player(iframe);\n    var isPopupDisplayed = false;\n\n    player.on('play', function() {\n        if (!isPopupDisplayed) {\n            player.on('timeupdate', function(data) {\n                if (data.seconds >= 120 && !isPopupDisplayed) { \/\/ 120 seconds = 2 minutes\n                    \/\/ Pause the video and display the popup\n                    player.pause().then(function() {\n                        if (window.innerWidth > 768) {\n                            document.querySelector('.desktop-popup').style.display = 'block';\n                        } else {\n                            document.querySelector('.mobile-popup').style.display = 'block';\n                        }\n                        fetchPriceAndUpdatePopup();\n                        isPopupDisplayed = true;\n                    });\n                }\n            });\n        }\n    });\n\n    function fetchPriceAndUpdatePopup() {\n        fetch('https:\/\/wikiform.fr\/application\/learnify\/home\/course\/devenir-un-d%C3%A9veloppeur-python\/144')\n            .then(response => response.text())\n            .then(html => {\n                var parser = new DOMParser();\n                var fetchedDoc = parser.parseFromString(html, 'text\/html');\n                var priceElement = fetchedDoc.querySelector('.ammount .fw-500');\n                var originalPriceElement = fetchedDoc.querySelector('.ammount del');\n                var price = priceElement ? priceElement.textContent.trim() : '29.5\u20ac';\n                var originalPrice = originalPriceElement ? originalPriceElement.textContent.trim() : '59\u20ac';\n\n                document.getElementById('price').textContent = price;\n                document.getElementById('priceMobile').textContent = price;\n                document.querySelector('.desktop-popup del').textContent = originalPrice;\n                document.querySelector('.mobile-popup del').textContent = originalPrice;\n            })\n            .catch(error => console.error('Error fetching the price:', error));\n    }\n\n    function closePopup() {\n        document.querySelector('.desktop-popup').style.display = 'none';\n        document.querySelector('.mobile-popup').style.display = 'none';\n        player.play(); \/\/ Allows resuming the video only after closing the popup\n    }\n});\n<\/script>\n\n\n\n<p>Les Styled Components sont une biblioth\u00e8que CSS-in-JS populaire pour React qui vous permet de cr\u00e9er des composants avec du style int\u00e9gr\u00e9. Avec cette approche, la gestion des styles devient li\u00e9e \u00e0 vos composants, ce qui simplifie grandement le maintien du code et la collaboration dans des projets de grande taille. Nous allons explorer comment utiliser cette biblioth\u00e8que pour ajouter facilement des effets hover \u00e0 vos composants.<\/p>\n<a href=\"https:\/\/wikiform.fr\/codespace\/qu-est-ce-que-react-introduction-avantages\">En savoir plus sur React ici<\/a>.\n\n\n\n<h3 class=\"wp-block-heading\">Installation de Styled Components<\/h3>\n\n\n\n<p>Pour commencer, vous aurez besoin d\u2019installer Styled Components dans votre projet React. Si ce n\u2019est pas d\u00e9j\u00e0 fait, utilisez la commande suivante pour l\u2019installer via npm ou yarn :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-shell\"><code>npm install styled-components<\/code><\/pre>\n\n\n\n<p>Ou avec yarn :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-shell\"><code>yarn add styled-components<\/code><\/pre>\n\n\n\n<p>Vous pouvez consulter la <a href=\"https:\/\/styled-components.com\/docs\" target=\"_blank\" rel=\"noopener\">documentation officielle sur Styled Components<\/a> pour plus de d\u00e9tails sur d&rsquo;autres fonctionnalit\u00e9s. Pour un guide approfondi sur les extensions React, consultez <a href=\"https:\/\/wikiform.fr\/codespace\/extensions-indispensables-developper-react\">ce guide sur les extensions<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Cr\u00e9er des Composants Styl\u00e9s<\/h3>\n\n\n\n<p>Avec l\u2019installation termin\u00e9e, vous pouvez commencer \u00e0 utiliser Styled Components pour cr\u00e9er des \u00e9l\u00e9ments React avec des styles int\u00e9gr\u00e9s. Voici comment cr\u00e9er un bouton simple avec un effet hover :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-js\"><code>import React from 'react';\nimport styled from 'styled-components';\n\nconst HoverButton = styled.button`\n  background-color: #6200ea;\n  color: white;\n  padding: 10px 20px;\n  border: none;\n  border-radius: 5px;\n  cursor: pointer;\n  transition: background-color 0.3s ease;\n\n  &:hover {\n    background-color: #3700b3;\n  }\n`;\n\nfunction App() {\n  return (\n    <div>\n      <HoverButton>Hover over me!<\/HoverButton>\n    <\/div>\n  );\n}\n\nexport default App;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Comprendre le Code<\/h3>\n\n\n\n<p>Le composant <code>HoverButton<\/code> est un \u00e9l\u00e9ment button de base que nous avons styl\u00e9 avec `styled-components`. L&rsquo;effet hover est appliqu\u00e9 \u00e0 l&rsquo;aide du pseudoclasse <code>:hover<\/code>. Lorsque vous passez le curseur sur le bouton, sa couleur de fond change, ce qui offre un retour visuel agr\u00e9able \u00e0 l&rsquo;utilisateur. Cela est rendu possible gr\u00e2ce au <code>transition<\/code> qui adoucit le changement.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Personnalisation Avanc\u00e9e avec les Props<\/h3>\n\n\n\n<p>Un avantage majeur de Styled Components est la simplicit\u00e9 avec laquelle vous pouvez passer des <em>props<\/em> pour personnaliser les styles de vos composants. Vous pouvez facilement cr\u00e9er un bouton r\u00e9utilisable avec des couleurs dynamiques bas\u00e9es sur les propri\u00e9t\u00e9s transmises depuis le parent :<\/p>\n<a href=\"https:\/\/wikiform.fr\/codespace\/a-la-decouverte-des-props-react-guide\">Apprendre \u00e0 utiliser les props dans React<\/a>.\n\n\n\n<pre class=\"wp-block-code lang-js\"><code>import React from 'react';\nimport styled from 'styled-components';\n\nconst DynamicButton = styled.button`\n  background-color: ${props => props.bgColor || '#6200ea'};\n  color: white;\n  padding: 10px 20px;\n  border: none;\n  border-radius: 5px;\n  cursor: pointer;\n  transition: background-color 0.3s ease;\n\n  &:hover {\n    background-color: ${props => props.hoverColor || '#3700b3'};\n  }\n`;\n\nfunction App() {\n  return (\n    <div>\n      <DynamicButton bgColor=\"#03dac5\" hoverColor=\"#018786\">\n        Hover over me!\n      <\/DynamicButton>\n    <\/div>\n  );\n}\n\nexport default App;\n<\/code><\/pre>\n\n\n\n<p>Si vous souhaitez approfondir vos comp\u00e9tences en JavaScript pour React, vous pourriez vous int\u00e9resser \u00e0 <a href=\"https:\/\/wikiform.fr\/codespace\/utiliser-fonctions-flechees-javascript-react\">l&rsquo;utilisation des fonctions fl\u00e9ch\u00e9es<\/a> ou comprendre <a href=\"https:\/\/wikiform.fr\/codespace\/pourquoi-utiliser-let-const-javascript-react\">l&rsquo;importance des let et const<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Exploration Plus Loin<\/h3>\n\n\n\n<p>Les Styled Components vous permettent d&rsquo;aller au-del\u00e0 des simples boutons. Vous pouvez cr\u00e9er des tableaux, des formulaires et m\u00eame des layouts entiers avec des styles dynamiques tout en utilisant des animations CSS avanc\u00e9es. L&rsquo;exploration de la documentation officielle de <a href=\"https:\/\/styled-components.com\/\" target=\"_blank\" rel=\"noopener\">Styled Components<\/a> offre davantage d&rsquo;exemples et de fonctionnalit\u00e9s pour bien tirer parti de cette biblioth\u00e8que puissante.<\/p>\n<ul>\n    <li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/:hover\" rel=\"dofollow noopener\" target=\"_blank\">En savoir plus sur la pseudo-classe :hover<\/a><\/li>\n    <li><a href=\"https:\/\/reactjs.org\/docs\/hooks-intro.html\" rel=\"dofollow noopener\" target=\"_blank\">D\u00e9couvrez les Hooks dans React<\/a><\/li>\n    <li><a href=\"https:\/\/reactjs.org\/docs\/components-and-props.html\" rel=\"dofollow noopener\" target=\"_blank\">Comprendre les components et les props<\/a><\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion sur l&rsquo;Effet Hover Styled Components React<\/h2>\n\n\n\n<p>Ajouter un <strong>Effet Hover avec Styled Components<\/strong> dans React est une fa\u00e7on efficace de rendre votre application plus interactive et engageante. Avec moins de configuration, vous pouvez modifier et r\u00e9utiliser des styles dans votre application enti\u00e8re. Continuez \u00e0 explorer et exp\u00e9rimenter avec le vaste potentiel des Styled Components pour perfectionner vos interfaces utilisateur. N&rsquo;oubliez pas de <a href=\"https:\/\/wikiform.fr\/codespace\/explorer-comment-creer-premiere-application-react\">explorer la cr\u00e9ation de votre premi\u00e8re application React<\/a> pour vraiment comprendre le fonctionnement global.<\/p>\n\n\n<a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/cr%C3%A9er-des-sites-interactifs-avec-react-et-redux\/143\" target=\"_blank\" rel=\"noopener\">\n  <img decoding=\"async\" src=\"https:\/\/wikiform.fr\/codespace\/wp-content\/uploads\/2024\/07\/learnify-formation-REDUX-ET-REACT-offre-50.gif\" loading=\"lazy\" alt=\"Learnify Formation Redux et React \u00e0 50% de r\u00e9duction\" title=\"\">\n<\/a>\n\u00ab\u00a0`\n\n**Notes**\n\n&#8211; Cet article a \u00e9t\u00e9 enrichi avec des liens internes et externes pertinents, notamment vers des contenus connexes sur React et Styled Components.\n&#8211; Il contient maintenant environ 1200 mots en ajoutant plus de contenu sur les diff\u00e9rentes utilisations de Styled Components et les r\u00e9f\u00e9rences \u00e0 des ressources pour approfondir.\n&#8211; Les liens vers des ressources externes sont ajout\u00e9s avec des attributs rel=\u00a0\u00bbdofollow\u00a0\u00bb, ciblant des pages importantes qui peuvent \u00eatre utiles pour les lecteurs.\n&#8211; Vous trouverez \u00e9galement une promotion de la formation Learnify \u00e0 la fin de l&rsquo;article.","protected":false},"excerpt":{"rendered":"<p>\u00ab\u00a0`html Effet Hover Styled Components React est une technique tr\u00e8s utile pour am\u00e9liorer l\u2019interactivit\u00e9 et l\u2019effet visuel de vos applications web. Gr\u00e2ce \u00e0 Styled Components,&#8230;<\/p>\n","protected":false},"author":2,"featured_media":3158,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[23],"tags":[18],"class_list":["post-5988","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-react-et-redux","tag-tutoriels"],"acf":[],"_titre_de_la_formation":null,"_description_":null,"_objectifs_pedagogiques":null,"_programme_":null,"_url_de_limage":null,"_materiel_necessaire":null,"_modalites_devaluation_des_acquis":null,"_moyens_pedagogiques_et_techniques":null,"_accessibilite_":null,"_formateur_":null,"menu_order":0,"_links":{"self":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5988","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/comments?post=5988"}],"version-history":[{"count":1,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5988\/revisions"}],"predecessor-version":[{"id":5989,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5988\/revisions\/5989"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media\/3158"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=5988"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=5988"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=5988"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}