1<!doctype html> 2<html lang="en" dir="ltr" class="docs-wrapper plugin-docs plugin-id-default docs-version-v4.43 docs-doc-page docs-doc-id-framework-integration/react" data-has-hydrated="false"> 3<head> 4<meta charset="UTF-8"> 5<meta name="generator" content="Docusaurus v3.5.2"> 6<title data-rh="true">React Integration with Stencil | Stencil</title><meta data-rh="true" name="viewport" content="width=device-width,initial-scale=1"><meta data-rh="true" name="twitter:card" content="summary_large_image"><meta data-rh="true" property="og:image" content="https://stenciljs.com/stencil-og.png"><meta data-rh="true" name="twitter:image" content="https://stenciljs.com/stencil-og.png"><meta data-rh="true" property="og:url" content="https://stenciljs.com/docs/react"><meta data-rh="true" property="og:locale" content="en"><meta data-rh="true" name="docusaurus_locale" content="en"><meta data-rh="true" name="docsearch:language" content="en"><meta data-rh="true" name="docusaurus_version" content="v4.43"><meta data-rh="true" name="docusaurus_tag" content="docs-default-v4.43"><meta data-rh="true" name="docsearch:version" content="v4.43"><meta data-rh="true" name="docsearch:docusaurus_tag" content="docs-default-v4.43"><meta data-rh="true" property="og:title" content="React Integration with Stencil | Stencil"><meta data-rh="true" name="description" content="Learn how to wrap your components so that people can use them natively in React"><meta data-rh="true" property="og:description" content="Learn how to wrap your components so that people can use them natively in React"><link data-rh="true" rel="icon" href="https://stenciljs.com/favicon-32x32.png"><link data-rh="true" rel="canonical" href="https://stenciljs.com/docs/react"><link data-rh="true" rel="alternate" href="https://stenciljs.com/docs/react" hreflang="en"><link data-rh="true" rel="alternate" href="https://stenciljs.com/docs/react" hreflang="x-default"><link rel="preconnect" href="https://www.googletagmanager.com">
7<script>window.dataLayer=window.dataLayer||[]</script>
vendor: 1 bytes, line 7
7
8<script>!function(e,t,a,n){e[n]=e[n]||[],e[n].push({"gtm.start":(new Date).getTime(),event:"gtm.js"});var g=t.getElementsByTagName(a)[0],m=t.createElement(a);m.async=!0,m.src="https://www.googletagmanager.com/gtm.js?id=GTM-TKMGCBC",g.parentNode.insertBefore(m,g)}(window,document,"script","dataLayer")</script>
8 9 10 11 12<link rel="search" type="application/opensearchdescription+xml" title="Stencil" href="/docs/opensearch.xml"> 13 14
15<script src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.js" async></script>
15<link rel="stylesheet" href="/docs/assets/css/styles.3db5c99f.css">
16<script src="/docs/assets/js/runtime~main.0bff9be6.js" defer="defer"></script>
vendor: 1 bytes, line 16
16
17<script src="/docs/assets/js/main.2ed84300.js" defer="defer"></script>
17 18</head> 19<body class="navigation-with-keyboard">
vendor: 68 bytes, lines 19-20
19 20<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=
20GTM-TKMGCBC
vendor: 84 bytes, lines 20-21
20" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript> 21
22<script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){try{return new URLSearchParams(window.location.search).get("docusaurus-theme")}catch(t){}}()||function(){try{return window.localStorage.getItem("theme")}catch(t){}}();t(null!==e?e:"light")}(),function(){try{const a=new URLSearchParams(window.location.search).entries();for(var[t,e]of a)if(t.startsWith("docusaurus-data-")){var n=t.replace("docusaurus-data-","data-");document.documentElement.setAttribute(n,e)}}catch(t){}}(),document.documentElement.setAttribute("data-announcement-bar-initially-dismissed",function(){try{return"true"===localStorage.getItem("docusaurus.announcement.dismiss")}catch(t){}return!1}())</script>
22<div id="__docusaurus"><div role="region" aria-label="Skip to main content"><a class="skipToContent_fXgn" href="#__docusaurus_skipToContent_fallback">Skip to main content</a></div><div class="announcementBar_mb4j" role="banner"><div class="content_knG7 announcementBarContent_xLdY"><a href="https://www.outsystems.com/?utm_source=ionic&utm_medium=referral&utm_campaign=ionic-referral&utm_term=none&utm_content=other&utm_campaignteam=digital-mktg&utm_partner=none" target="_blank" rel="noopener"><span>An <strong>OutSystems</strong> Company â</span></a></div></div><div id="__docusaurus_skipToContent_fallback" class="main-wrapper mainWrapper_Nx9I"><div class="docsWrapper_hBAB"><button aria-label="Scroll back to top" class="clean-btn theme-back-to-top-button backToTopButton_sjWU" type="button"></button><div class="docRoot_UBD9"><aside class="theme-doc-sidebar-container docSidebarContainer_YfHR"><div class="sidebarViewport_aRkj"><div class="sidebar_sG9j"><div class="sidebarTop_sncL"><div class="sidebarTopEnd__3Mf"><div class="logo_TVfK"><a href="https://stenciljs.com" target="_self" rel="noopener noreferrer"><img src="/docs/img/logo-light.png" alt="Site Logo" class="themedComponent_mlkZ themedComponent--light_NVdE" height="20" width="96"><img src="/docs/img/logo-dark.png" alt="Site Logo" class="themedComponent_mlkZ themedComponent--dark_xIcU" height="20" width="96"></a><div class="logoAfter_U7Cy logo__after"><a href="/docs"><svg xmlns="http://www.w3.org/2000/svg" width="50" height="14" fill="none"><path fill="#92A0B3" d="M4.53 13C8.69 13 11 10.52 11 6.96 11 3.42 8.7.93 4.53.93H.43V13h4.1Zm4.3-6.04c0 2.5-1.4 4.14-4.37 4.14H2.48V2.83h1.98c2.97 0 4.37 1.64 4.37 4.13Zm5.9 0c0-2.6 1.7-4.31 4.06-4.31 2.36 0 4.06 1.71 4.06 4.31 0 2.6-1.7 4.32-4.06 4.32-2.37 0-4.07-1.71-4.07-4.31Zm-2.18 0a6.06 6.06 0 0 0 6.24 6.3c3.67 0 6.24-2.7 6.24-6.3A6.06 6.06 0 0 0 18.79.67a6.06 6.06 0 0 0-6.24 6.3Zm14.01-.01c0 3.72 2.52 6.29 6.03 6.29 3 0 5.3-1.79 5.8-4.66h-2.2c-.4 1.7-1.78 2.69-3.6 2.69-2.4 0-3.85-1.72-3.85-4.32 0-2.6 1.44-4.3 3.85-4.3 1.82 0 3.2.98 3.6 2.68h2.2C37.9 2.46 35.6.67 32.6.67c-3.51 0-6.03 2.57-6.03 6.28Zm17.79 4.43c-1.63 0-2.5-.86-2.59-2.15h-2.04c.07 1.97 1.31 4 4.52 4 2.9 0 4.8-1.42 4.8-3.61 0-4.83-6.8-2.77-6.8-5.43 0-1.07.87-1.66 2.28-1.66 1.54 0 2.34.95 2.36 2.14h2.02c-.05-2.26-1.54-4-4.38-4-2.69 0-4.32 1.65-4.32 3.58 0 4.82 6.75 2.51 6.75 5.45 0 1.09-.95 1.69-2.6 1.69Z"/></svg></a></div></div><div class="navbar__item dropdown dropdown--hoverable"><a aria-current="page" class="navbar__link active" aria-haspopup="true" aria-expanded="false" role="button" href="/docs/react">v4.43</a><ul class="dropdown__menu"><li><a class="dropdown__link" href="/docs/next/react">Next</a></li><li><a aria-current="page" class="dropdown__link dropdown__link--active" href="/docs/react">v4.43</a></li><li><a class="dropdown__link" href="/docs/v4.42/react">v4.42</a></li><li><a class="dropdown__link" href="/docs/v4.41/react">v4.41</a></li><li><a class="dropdown__link" href="/docs/v4.40/react">v4.40</a></li><li><a class="dropdown__link" href="/docs/v4.39/react">v4.39</a></li><li><a class="dropdown__link" href="/docs/v4.38/react">v4.38</a></li><li><a class="dropdown__link" href="/docs/v4.37/react">v4.37</a></li><li><a class="dropdown__link" href="/docs/v4.36/react">v4.36</a></li><li><a class="dropdown__link" href="/docs/v4.35/react">v4.35</a></li><li><a class="dropdown__link" href="/docs/v4.34/react">v4.34</a></li><li><a class="dropdown__link" href="/docs/v4.33/react">v4.33</a></li><li><a class="dropdown__link" href="/docs/v3/react">v3</a></li><li><a class="dropdown__link" href="/docs/v2/react">v2</a></li></ul></div></div></div><div class="productDropdown_WBpG product-dropdown dropdown"><button class="productDropdownButton_oJda ds-heading-6"><div class="productDropdownButtonStart_geCD"><img src="/docs/img/components/product-dropdown/logo-dark.png" alt="Stencil Logo" class="themedComponent_mlkZ themedComponent--light_NVdE" width="20" height="20"><img src="/docs/img/components/product-dropdown/logo-light.png" alt="Stencil Logo" class="themedComponent_mlkZ themedComponent--dark_xIcU" width="20" height="20"><div class="productDropdownButtonTextWrapper_TTPK"><span class="productDropdownButtonText_N95v">Stencil Docs</span></div></div><div style="background-size:cover;background-repeat:no-repeat;position:relative;background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAACXBIWXMAABYlAAAWJQFJUiTwAAABMUlEQVR4nFVQv0vDUBB+LoI46CAOriL+QBAKgiK1NHeJFERcQpJ7L+3irlWTd2liHRRcHDo4CApODi4ODhZFEZwq/lHKS5OhB3fcfXfcfd+JFfd8HKSOQPKDJTsVUZitTiZR6i4Q36EXLwsgnQHFvbpkB0n3a63DaTMIkq9R8gX6vIek34UTdu4bYbZrmk6YvjpBspRvDNOnRutsK8eb6UDYKlkF0h+FZ+VpCHgTib+A4k8g3S75zO7IaLEcEkKMmYB+NIdBtDACDu3P5GU9im+47QlUfAWSXywvqpYtdPUUKO4B8bMlo4pRfZm75HUg/VYLjmcK1Tc2JbHlJVXDVaDq3Doq2x8qzfoYZDknW6WPdjPdLr4xEPXm6TwQG2W/lh8flafrSq8B6W+Q/GMF+uAfIdJpY9O
22Lx9gAAAAASUVORK5CYII=")"><svg width="12" height="12"></svg><noscript><img style="position:absolute;top:0;left:0" src="/docs/assets/ideal-img/icon-more.5434974.27.png" srcset="/docs/assets/ideal-img/icon-more.5434974.27.png 27w" alt="more icon" width="12" height="12"></noscript></div><div style="background-size:cover;background-repeat:no-repeat;position:relative;background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAACXBIWXMAABYlAAAWJQFJUiTwAAAAyUlEQVR4nFXQMSsFYBQG4GtRMlyDDFYJpZQySNdokvwIP4CB6WahLAaDQVGmO1gMBiJSdyL/6Tw6t3Pru1+d853e9z2d854OpnGKR2x26mE2Is5xHxFrCfRxgz28Ya6E17jAAT4SeMB+khHxitUSPmGn6p9M6/is6DejtyPiG18RcTIGF7DSiKbqX8TyBDiuG9EEnmkGV3hBryG7ZfJ5dA1cVmzhHfMlvMVZNueuCdzhsMg8z2gnDLDbul5KZ/iLiONm9AaG+MXRP4ow+sccIxOkAAAAAElFTkSuQmCC")"><svg width="12" height="12"></svg><noscript><img style="position:absolute;top:0;left:0" src="/docs/assets/ideal-img/icon-more.5230332.27.png" srcset="/docs/assets/ideal-img/icon-more.5230332.27.png 27w" alt="more icon" width="12" height="12"></noscript></div></button><div class="productDropdownMenu_CB0L dropdown__menu dropdown--show"><div class="productDropdownStart_k2fc"><article><h2 class="ds-overline-1">Products</h2><ul><li class="productDropdownItem_R7mi"><a class="ds-heading-5 productDropdownItemLink_fmtA" href="https://ionic.io/docs/appflow"><div style="background-size:cover;background-repeat:no-repeat;position:relative;background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAACXBIWXMAABYlAAAWJQFJUiTwAAABDElEQVR4nGWPvy5EYRDFf3gCDb6ZvduoUFG4e2e+r0PiAUSh9+cBSFan1IiEilBho5CsRCLZRCJankClVkm0ErJ3b6yNk8yfZM6cOQM9DJd5Ip8i2BnaDV8emPWwMlKWWjpBvY34Kxo71XCIgUbna2h6JqQ5xB5Ru0aK2T+qlVqIO4R4jKRNNLYJtoTG3f/nJT6VvqRoI8UNmQliR4zl431SSN3tDqHhqH+g9kbwRTSuE2ytT9R4icQtpNhH/AEpThG7ox6nETus1LyO2guZz6DpHfUrNDVR+ySzSYLvoTEHsW2Ct8i6inaPFAflx8GbqG8gaRVtNEG9hfg3Yl9IXPi1U4+jiF8Q/Jbg5z9N5D0IQz5AJQAAAABJRU5ErkJggg==")"><svg width="20" height="20"></svg><noscript><img style="position:absolute;top:0;left:0" src="/docs/assets/ideal-img/logo-appflow.79bf9aa.43.png" srcset="/docs/assets/ideal-img/logo-appflow.79bf9aa.43.png 43w" alt="appflow logo" width="20" height="20"></noscript></div><div style="background-size:cover;background-repeat:no-repeat;position:relative;background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAACXBIWXMAABYlAAAWJQFJUiTwAAAAyElEQVR4nF3PsSvFURjG8cO1+ROUjaxkIyl/AJMV8QfIoKx+Fgbd2x1MbLKQlLJhw261KZvBYHw/+ul1O5nec97ne57nPKWUUjCccwbXuMJqrZV/4AVO8YrHAZDiUM4JvGAa9/lgbmCETl72cRgR2xk/j6Y2aw8jeMYS7hIcQw/jdfwKbrEYEd/4wDLWsVmDl1jDSTZuIuIBk+i3iX8lnjAVEZ/p3MVXantYaMEGNzjAOXZwjC3sYuO3VC7f8YbZ6jujOMJZa/ID8voTpKYznyIAAAAASUVORK5CYII=")"><svg width="20" height="20"></svg><noscript><img style="position:absolute;top:0;left:0" src="/docs/assets/ideal-img/logo-appflow.64f5f2f.43.png" srcset="/docs/assets/ideal-img/logo-appflow.64f5f2f.43.png 43w" alt="appflow logo" width="20" height="20"></noscript></div>Appflow</a></li><li class="productDropdownItem_R7mi"><a class="ds-heading-5 productDropdownItemLink_fmtA" href="https://ionic.io/docs/portals"><div style="background-size:cover;background-repeat:no-repeat;position:relative;background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAACXBIWXMAABYlAAAWJQFJUiTwAAAA/UlEQVR4nHWRQUoDQRBFX8TcYaZ6NO7EdRbS1WPmCkNA93ERJgfRjYJ6AQXNKcZrOIqCiyxd5gZS1YIg2FB0d3VR/9draJpdRDuCPiPxBdENEjeIDgTtKesl0+kYRB8R7anqljLtgyWXYw7ihCq2/iZpzaiabRE9JK+dn/33XMyOCCdfENIboh8EvUd0RZHmFMfzbCc9IPpJqVeMJF6yp0IVzxG9ReJTDr3x3KQpCPUpSDrzi8TFn8I7qrjwJhIvoKyvvX1IJt25bJZeuZ2g74i+4kbN8H/D2KCh3pr02hGUsXUkhsYQGSpDJrF3hA7ToObEkGF7DJT2CdpZzTfWA0hqeM2jHAAAAABJRU5ErkJggg==")"><svg width="20" height="20"></svg><noscript><img style="position:absolute;top:0;left:0" src="/docs/assets/ideal-img/logo-portals.0c94e9c.44.png" srcset="/docs/assets/ideal-img/logo-portals.0c94e9c.44.png 44w" alt="portals logo" width="20" height="20"></noscript></div><div style="background-size:cover;background-repeat:no-repeat;position:relative;background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAACXBIWXMAABYlAAAWJQFJUiTwAAAAtUlEQVR4nIXRQS6EQRDF8Y6YQ7BgOY4jTsBGzGlwAQQHsB7XICGZWbgBF6ifPKkv+dhYvHT1yz9dVa8HdnGBZ7zgo/WKNc6xGLhv4xgHMVuH7a2r6iHgF5ZjjNQ7Oec1lmFSbPGOG6yq6iTqce7whk3AJ+zjDFdpE+Gyvb0wE5jL6R/wusE88gNu+vnbtJu1XvU4GWs7LXP0zzKfo6oeZ/EkkimeRPUrnpgJNXBCngeeT8j2i28+/D+jr8OIJQAAAABJRU5ErkJggg==")"><svg width="20" height="20"></svg><noscript><img style="position:absolute;top:0;left:0" src="/docs/assets/ideal-img/logo-portals.45dcaad.44.png" srcset="/docs/assets/ideal-img/logo-portals.45dcaad.44.png 44w" alt="portals logo" width="20" height="20"></noscript></div>Portals</a></li></ul></article><article><h2 class="ds-overline-1">Open Source</h2><ul><li class="productDropdownItem_R7mi"><a class="ds-heading-5 productDropdownItemLink_fmtA" href="https://ionicframework.com/docs" target="_blank" rel="noopener"><div style="background-size:cover;background-repeat:no-repeat;position:relative;background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAACXBIWXMAABYlAAAWJQFJUiTwAAABKElEQVR4nEWQvUpDQRBGv70aJYIpVDA7s0ELQbD0Skxm9iY21hYaEXwGSeIDKFj5GEYLsRIEEVNpo4U/6RVL30JQdm/UrWZnznCYD8BhgvBIt2HlHqTvYPmAlUdQfQdpOgHARAZOjkFhkEneAGC9Gtf4NM5/jZX9EmCzXZDcxa1pmUyc3wNrO/wTlq4hfRufW50HqH6LWV0DmqOGdWBYLgzruWF9gW3ORKFrFQP4HFWcdYzzvV+zcdkpyO+HumBrywF8ysFG27js7B/0PbDv5jO/FcBrON9EmhaM84NcG/WvcLUiSBYT1g7A9RZY+vGYqWop6iq+i4VqCWiNgOUEVtdzD8sRSPqwPv2LpyIrILkBycGwMwy8LJuwchWDtvoA0ktY2ciZb/MDdRs+kjOdD4MAAAAASUVORK5CYII=")"><svg width="20" height="20"></svg><noscript><img style="position:absolute;top:0;left:0" src="/docs/assets/ideal-img/logo-framework.9739870.44.png" srcset="/docs/assets/ideal-img/logo-framework.9739870.44.png 44w" alt="Ionic Framework logo" width="20" height="20"></noscript></div><div style="background-size:cover;background-repeat:no-repeat;position:relative;background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAACXBIWXMAABYlAAAWJQFJUiTwAAAA1klEQVR4nE3QvS4FcAzG4f/xMZAwuQCbxIiJgcVs8BGJa5CDCzCYXIbDICaJRISJhcHXTozuQvpI6UnO0rRv3/bXtGGotdawhQd84gtP2MY4Oq1Mx9VY/BP+taWI+I6IH8y2iNjBfU5hArvoZh0R+/jAdE7eYgUjEfGOC5zjFVO1fSzDSxYRsYfeAPoUB5XPZXiuohsRZwPGXqIr38hwHRHLGC10YhP/lkjMJC2Nm7ir4ycTl5sqH8YJVvuYozLPD6AXcBMRh32h//B1XNU/H3GJtep1fgFoLBV/BxD99gAAAABJRU5ErkJggg==")"><svg width="20" height="20"></svg><noscript><img style="position:absolute;top:0;left:0" src="/docs/assets/ideal-img/logo-framework.166f43d.44.png" srcset="/docs/assets/ideal-img/logo-framework.166f43d.44.png 44w" alt="Ionic Framework logo" width="20" height="20"></noscript></div><span class="productDropdownItemText_S2rp">Ionic Framework<svg class="iconExternalLink_M2d8" xmlns="http://www.w3.org/2000/svg" width="9" height="9" aria-hidden="true">
22<path fill="currentColor" d="M9 7.91H7.33V2.9L1.22 9 0 7.78l6.11-6.1H1.08V0H9v7.91Z"></path></svg></span></a></li><li class="productDropdownItem_R7mi"><a class="ds-heading-5 productDropdownItemLink_fmtA" href="https://capacitorjs.com/docs" target="_blank" rel="noopener"><div style="background-size:cover;background-repeat:no-repeat;position:relative;background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAACXBIWXMAABYlAAAWJQFJUiTwAAABKUlEQVR4nE2RvUsDQRDF313UIoWxCrczCUIQsfYgZGbuksbCT7AJNsZK0UYRDaKm0t4itlqJhdppp5VWac1/JLsn6DS7O7x989u3QKh0MiysqzFZHy4th3PddkDyiNnODIBuyfcmalkndnJUYluJSQcgPQDrNVj3QPpRGLJdoJ5vxaQnU04WQLYBsiEaaQUsdyDpA2S3EekYTkeoyWYQVK31i/IC1suwj8jGYDuHyxdB+gmSdbA+I8nbSKQH1jc0lirAXHMaTl7Buo1E2mB7CmLSr3DZm5B+/zH6Mb6qzVZEOiwwdOSxIo8DtmOQ3hfgdgPO10DZvH9YibMunJ4VbiTvcLoLZ1dIbD+mbIAkW46dHvrICpGP0IdJ+gCWXui5tByTnPrw/3/GD9uxP60alsUKAAAAAElFTkSuQmCC")"><svg width="20" height="20"></svg><noscript><img style="position:absolute;top:0;left:0" src="/docs/assets/ideal-img/logo-capacitor.cd63ad3.44.png" srcset="/docs/assets/ideal-img/logo-capacitor.cd63ad3.44.png 44w" alt="Capacitor logo" width="20" height="20"></noscript></div><div style="background-size:cover;background-repeat:no-repeat;position:relative;background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAACXBIWXMAABYlAAAWJQFJUiTwAAAA00lEQVR4nE3RPS8EQBDG8U0umiu4TyFq1VW0XhONaFARGiKIeKnoFaelEgXX0VFRXcsXmp+MjOSa3czMf595Zra11hom6l7CKboVb0fEE3oZdDIZEfM4xGJEXGEfNxGxi49kEr7ABo4xg1UMMIX77JLQXUT8YIS1BCKiXwJDXP6pFXSOWXxiBS+YwxbeUjnBSbxis4rPBX/V4xT5Hvc4rA798pc2RtVxkIUjPJTxWyxjugZbx9m/2jt2cI29Ws0CDnJlxXTy6OExjVeyi5Nc/vhn/AJTPyQxGE8ueAAAAABJRU5ErkJggg==")"><svg width="20" height="20"></svg><noscript><img style="position:absolute;top:0;left:0" src="/docs/assets/ideal-img/logo-capacitor.67c3540.44.png" srcset="/docs/assets/ideal-img/logo-capacitor.67c3540.44.png 44w" alt="Capacitor logo" width="20" height="20"></noscript></div><span class="productDropdownItemText_S2rp">Capacitor<svg class="iconExternalLink_M2d8" xmlns="http://www.w3.org/2000/svg" width="9" height="9" aria-hidden="true"><path fill="currentColor" d="M9 7.91H7.33V2.9L1.22 9 0 7.78l6.11-6.1H1.08V0H9v7.91Z"></path></svg></span></a></li><li class="productDropdownItem_R7mi"><a class="ds-heading-5 productDropdownItemLink_fmtA"><div style="background-size:cover;background-repeat:no-repeat;position:relative;background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAHCAYAAAAxrNxjAAAACXBIWXMAABYlAAAWJQFJUiTwAAAA/ElEQVR4nGNggAAmMClpL8IgZbWDQdJqJYOU9Q4Gaes/DFKWPlA1DIxwxVKWhxgkrRYxiBhLMkhZLWOQtKgEywhb8TIwMPwHK+RUdprHKmf3kUXO9hqLnO1rFnnbp8zSNvNZ5e2vsinYTwFrsPBPn6LnGr9VzzVDTMUsWkbbNlxWTtdbUN8tPlXLMeaaiIa7JENSaatjVHbDnYSCluXxBS2nEgtb38cXtNxLKGh9Ep3beC8gpUINbFpxdzc3iM6v71fIqelbVVA/ySWvZoJPTnXf+bz6CTYgudDQUGaw4rS0NNacyu7CzMruuoyqHvfsyp7stKpOE4iiVWBFAPL7SW2Ua5MJAAAAAElFTkSuQmCC")"><svg width="20" height="16"></svg><noscript><img style="position:absolute;top:0;left:0" src="/docs/assets/ideal-img/logo-stencil.fbf94aa.50.png" srcset="/docs/assets/ideal-img/logo-stencil.fbf94aa.50.png 50w" alt="Stencil logo" width="20" height="16"></noscript></div><div style="background-size:cover;background-repeat:no-repeat;position:relative;background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAHCAYAAAAxrNxjAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAoklEQVR4nE3PoUrDURiG8aNiEsNABgMFk1ewuDIYrHgdFpPR4lUsKxgcswtm48qSpmGaaWHY5f3JgfOHpSc8z/fCV0opBYeNZ3jHojLJH66rq/Kgi/GBZwzwgvvmTvfDR/ziC9skP3jCJ2bd6gxv6Cc5xwV6uGmHgxqNscY8yTLJDt/YNF51ayeNl3jFpD6QZIVRc0ddfJzkLskDprjFcD/6B8CExDDPgiClAAAAAElFTkSuQmCC")"><svg width="20" height="16"></svg><noscript><img style="position:absolute;top:0;left:0" src="/docs/assets/ideal-img/logo-stencil.b6753c6.50.png" srcset="/docs/assets/ideal-img/logo-stencil.b6753c6.50.png 50w" alt="Stencil logo" width="20" height="16"></noscript></div><span class="productDropdownItemText_S2rp">Stencil</span></a></li></ul></article></div><div class="productDropdownEnd_jgEv"><div class="productDropdownEndLinks_Wuzx"><a class="ds-paragraph-4" href="https://ionic.link/discord" target="_blank" rel="noopener nofollow">Community Hub</a><a class="ds-paragraph-4" href="https://forum.ionicframework.com/c/stencil/21" target="_blank" rel="noopener nofollow">Forum</a></div><div class="productDropdownIcons_cilE">
22<a href="https://twitter.com/stenciljs" target="_blank" rel="noopener nofollow"><div style="background-size:cover;background-repeat:no-repeat;position:relative;background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAICAYAAADA+m62AAAACXBIWXMAABYlAAAWJQFJUiTwAAABHUlEQVR4nD2Pu07DQBBFV4BEhagoqJH4CgQfgCjT0fDwrO3YxnjHj9iYhV07TqJAlIKWigr+gJ4GPiMNBaJIRxJn0VqIajRXZ3TPEGDF4XnQ3SWEkFbreVVPiiIzw0IBE18GikdAcUy8q+HYTqpvYHxfQ+Cn2046mNpxpayoW/vXI2XgDSVnfn5kJ9XSSfsKAvEOKF9oKGeUiaUVlYoyMYG4t0kgkG476Slgcu5mA+VlQ0VR6r3WuRmVH7qJnIb9DYrFmw4pypk+aMBAzC/ye+XEVdGAjRe79UzU8rKmKBfAxI9WaXeqyYnb2Wog1x2vc87XAMWDnegHyoWX3ykrLqfGZX6gGc75inbcA5Svf7U1RfEJKJ4A5c4/RAj5Bbv6kdCLAFKYAAAAAElFTkSuQmCC")"><svg width="17" height="14"></svg><noscript><img style="position:absolute;top:0;left:0" src="/docs/assets/ideal-img/logo-twitter.ac32845.34.png" srcset="/docs/assets/ideal-img/logo-twitter.ac32845.34.png 34w" alt="Twitter logo" width="17" height="14"></noscript></div><div style="background-size:cover;background-repeat:no-repeat;position:relative;background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAICAYAAADA+m62AAAACXBIWXMAABYlAAAWJQFJUiTwAAAAp0lEQVR4nE2OPQ5BYRBFJ0hUolKoJVYhLEDsQK9iA1obUGhVOjvQa1jGaxSieJ2/e2SeGXGL7+abOXNnDBgDfTMzoO4uaclXV2ALTL25lnQDhgF3gTLAd/jMGxNA/pN0AvbAI2tAAbQdnEfhGZ7KtLNvcrAl6RhFT8qB9FUFBrzIFEkv4P63tlNBkppAA9jEnQ66SkmjCKr5MwAOsdbvukjaAb0fZGYfHAYB+E7xDH4AAAAASUVORK5CYII=")"><svg width="17" height="14"></svg><noscript><img style="position:absolute;top:0;left:0" src="/docs/assets/ideal-img/logo-twitter.d2eb4dc.34.png" srcset="/docs/assets/ideal-img/logo-twitter.d2eb4dc.34.png 34w" alt="Twitter logo" width="17" height="14"></noscript></div></a><a href="https://chat.stenciljs.com" target="_blank" rel="noopener nofollow"><div style="background-size:cover;background-repeat:no-repeat;position:relative;background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAICAYAAADA+m62AAAACXBIWXMAABYlAAAWJQFJUiTwAAABEklEQVR4nCWOzUrDUBBGL67E+iT6SgWhtTNNwKRkJknVtJfMTZpCrX0UsS7EpZu6rgj+4E6R+gKKEnrl1sVhhu98MKOUUgpJ7wHll8Byh2Ta3UhayHILbC4OE9l3HdUkavj96iXMprYbF/XR6cQ6uklZh4Op9dLq2XWUn1atIDuzXjL6cRPZ1I7/rPwNson1jsdt5SXlVU/PLJJZYCQhknwDyxdQESDJwjnXUUjmrTecWYhksPmX5dHhdojMycaxvCu/X62RjUWWFcZy7aWjtZ9WFkhukOXDOb8/Xitk89AbnltMiifk/B7ZfCLJCkiWGBevGxebpQLQOx2SElnmWustX+vdJk0a7nSHZQ4s+YHW23/E7Z871TRAGQAAAABJRU5ErkJggg==")"><svg width="18" height="14"></svg><noscript><img style="position:absolute;top:0;left:0" src="/docs/assets/ideal-img/logo-discord.5546f8f.36.png" srcset="/docs/assets/ideal-img/logo-discord.5546f8f.36.png 36w" alt="Discord logo" width="18" height="14"></noscript></div><div style="background-size:cover;background-repeat:no-repeat;position:relative;background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAICAYAAADA+m62AAAACXBIWXMAABYlAAAWJQFJUiTwAAAAo0lEQVR4nF3PwUoCQBCA4cVTZE+Sb5X3ugsdPPg8Uh6iYxc9K4Ip3oqoF0iMmC/GRhAHlpl/9h92trXWGq7xgBn6uMELxui1krrYQET8Zj6r1+mkmNMZ+6NwIv1U7qc4KZjiDruI+MZt9TImKb4V3NcqqzxVD+ruPSEKPvF0ws/4OK6c4rLgFYuI+MqhiJhjW3vPU7zECI/o4Orwy/+nszfExR87Mxc7e73hZwAAAABJRU5ErkJggg==")"><svg width="18" height="14"></svg><noscript><img style="position:absolute;top:0;left:0" src="/docs/assets/ideal-img/logo-discord.f120621.36.png" srcset="/docs/assets/ideal-img/logo-discord.f120621.36.png 36w" alt="Discord logo" width="18" height="14"></noscript></div></a><a href="https://github.com/ionic-team/stencil" target="_blank" rel="noopener nofollow"><div style="background-size:cover;background-repeat:no-repeat;position:relative;background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAJCAYAAAALpr0TAAAACXBIWXMAABYlAAAWJQFJUiTwAAABM0lEQVR4nDWQv0oDQRDGJ6IBfQQhitrbaiX4CsL1EmT2NgliMnt7iYJLdjZ3xEqIBH0LG7FLq0geQRG7gDbBPyAKK3uSYmD4vo9vfgwAACCaJSQ+F4pfBdlfJP4Ryr6hsoOo2VwMGYiMKQvlRiJx05rOPmtp7mvt3IddKJ7G2o2iKCqDTFyqe0OPKe9U6WQVqbsVN922bHFFJr3d4EmddUDq/AmJ36t1sxwueO9Lxpi5AunQrKDiL5lmj9A4PvNI9u6f9WoBAEphjDHzhUZ2XO/0PUidTWLlvlHxRjBC26xxv8UVVPYj1tkEZOqGceKekbo3qFjOwkh2Tygekx14qd0FHBCvYcs+IHUdqu5R8QoAaHT69+380su09xJYC1Eqs4lkrwXx6SwoyN6i4rFsm/Ug/AGw3Y81jFs1kQAAAABJRU5ErkJggg==")"><svg width="17" height="16"></svg><noscript><img style="position:absolute;top:0;left:0" src="/docs/assets/ideal-img/logo-github.4176cf3.34.png" srcset="/docs/assets/ideal-img/logo-github.4176cf3.34.png 34w" alt="Github logo" width="17" height="16"></noscript></div><div style="background-size:cover;background-repeat:no-repeat;position:relative;background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAJCAYAAAALpr0TAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAwElEQVR4nE3QwSoFUBSF4ePGLR5BIcxNGSmv4C3MzGRi5AEUeQ4TmZmSPALJTDERV4nWp825ubtO7b3W39q701prDXM4wnOSb3zhBceYbR0a4hKvGPmvUdfKG7Yke93YxBLWk2xgAVvd26/Ee7xhvm+YwqD3i0k+cFdD1VU3ZjpYb7prtwVU84RPrHZjMJFY69+LqeE0yQPOsTOGk2yP03BS4nKSGxwm2f39ij/4ukOPdetYXMNZkoMJ8KInrpTwA+R3COjU7xUjAAAAAElFTkSuQmCC")"><svg width="17" height="16"></svg><noscript><img style="position:absolute;top:0;left:0" src="/docs/assets/ideal-img/logo-github.45e33a9.34.png" srcset="/docs/assets/ideal-img/logo-github.45e33a9.34.png 34w" alt="Github logo" width="17" height="16"></noscript></div></a></div></div></div></div><nav aria-label="Docs sidebar" class="menu thin-scrollbar menu_SIkG menuWithAnnouncementBar_GW3s"><ul class="theme-doc-sidebar-menu menu__list"><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist menu__link--sublist-caret" role="button" aria-expanded="false" href="/docs/introduction">Introduction</a></div></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist menu__link--sublist-caret" role="button" aria-expanded="false" href="/docs/api">Components</a></div></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist menu__link--sublist-caret menu__link--active" role="button" aria-expanded="true" href="/docs/overview">Framework Integrations</a></div><ul style="display:block;overflow:visible;height:auto" class="menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/docs/overview">Overview</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/docs/angular">Angular</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/docs/ember">Ember</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/docs/javascript">JavaScript</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link menu__link--active" aria-current="page" tabindex="0" href="/docs/react">React</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/docs/vue">Vue</a></li></ul></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist menu__link--sublist-caret" role="button" aria-expanded="false" href="/docs/static-site-generation">Static Site Generation</a></div></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist menu__link--sublist-caret" role="button" aria-expanded="false" href="/docs/config">Config</a></div></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist menu__link--sublist-caret" role="button" aria-expanded="false" href="/docs/output-targets">Output Targets</a></div></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist menu__link--sublist-caret" role="button" aria-expanded="false" href="/docs/doc-generation">Documentation Generation</a></div></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist menu__link--sublist-caret" role="button" aria-expanded="false" href="/docs/assets">Guides</a></div></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist menu__link--sublist-caret" role="button" aria-expanded="false" href="/docs/cli-api">Core Compiler API</a></div></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist menu__link--sublist-caret" role="button" aria-expanded="false" href="/docs/testing-overview">Testing</a></div></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist menu__link--sublist-caret" role="button" aria-expanded="false" href="/docs/faq">Reference</a></div></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible">
22<a href="https://twitter.com/stenciljs" target="_blank" rel="noopener noreferrer" class="menu__link menu__link--sublist menu__link--sublist-caret" role="button" aria-expanded="false">Community</a></div></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist menu__link--sublist-caret" role="button" aria-expanded="false" href="/docs/telemetry">Legal</a></div></li></ul></nav></div></div></aside><main class="docMainContainer_X2s8"><nav aria-label="Main" class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><button aria-label="Toggle navigation bar" aria-expanded="false" class="navbar__toggle clean-btn" type="button"><svg width="30" height="30" viewBox="0 0 30 30" aria-hidden="true"><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><div class="logo_TVfK"><a href="https://stenciljs.com" target="_self" rel="noopener noreferrer" class="navbar__brand"><div class="navbar__logo"><img src="/docs/img/logo-light.png" alt="Site Logo" class="themedComponent_mlkZ themedComponent--light_NVdE" height="20" width="96"><img src="/docs/img/logo-dark.png" alt="Site Logo" class="themedComponent_mlkZ themedComponent--dark_xIcU" height="20" width="96"></div></a><div class="logoAfter_U7Cy logo__after"><a href="/docs"><svg xmlns="http://www.w3.org/2000/svg" width="50" height="14" fill="none"><path fill="#92A0B3" d="M4.53 13C8.69 13 11 10.52 11 6.96 11 3.42 8.7.93 4.53.93H.43V13h4.1Zm4.3-6.04c0 2.5-1.4 4.14-4.37 4.14H2.48V2.83h1.98c2.97 0 4.37 1.64 4.37 4.13Zm5.9 0c0-2.6 1.7-4.31 4.06-4.31 2.36 0 4.06 1.71 4.06 4.31 0 2.6-1.7 4.32-4.06 4.32-2.37 0-4.07-1.71-4.07-4.31Zm-2.18 0a6.06 6.06 0 0 0 6.24 6.3c3.67 0 6.24-2.7 6.24-6.3A6.06 6.06 0 0 0 18.79.67a6.06 6.06 0 0 0-6.24 6.3Zm14.01-.01c0 3.72 2.52 6.29 6.03 6.29 3 0 5.3-1.79 5.8-4.66h-2.2c-.4 1.7-1.78 2.69-3.6 2.69-2.4 0-3.85-1.72-3.85-4.32 0-2.6 1.44-4.3 3.85-4.3 1.82 0 3.2.98 3.6 2.68h2.2C37.9 2.46 35.6.67 32.6.67c-3.51 0-6.03 2.57-6.03 6.28Zm17.79 4.43c-1.63 0-2.5-.86-2.59-2.15h-2.04c.07 1.97 1.31 4 4.52 4 2.9 0 4.8-1.42 4.8-3.61 0-4.83-6.8-2.77-6.8-5.43 0-1.07.87-1.66 2.28-1.66 1.54 0 2.34.95 2.36 2.14h2.02c-.05-2.26-1.54-4-4.38-4-2.69 0-4.32 1.65-4.32 3.58 0 4.82 6.75 2.51 6.75 5.45 0 1.09-.95 1.69-2.6 1.69Z"/></svg></a></div></div></div><div class="navbar__items navbar__items--right"><div class="navbarSearchContainer_Bca1"><div class="search_nyjI"><input class="searchInput_vW2k" placeholder="Search docs..." id="algolia-search"></div></div><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/docs/introduction">Docs</a><a href="https://stenciljs.com/resources" target="_self" rel="noopener noreferrer" class="navbar__item navbar__link">Resources<svg class="iconExternalLink_M2d8" xmlns="http://www.w3.org/2000/svg" width="9" height="9" aria-hidden="true"><path fill="currentColor" d="M9 7.91H7.33V2.9L1.22 9 0 7.78l6.11-6.1H1.08V0H9v7.91Z"></path></svg></a><div class="navbar__item"><div class="separator"></div></div><a href="https://github.com/stencil-community" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Community<svg class="iconExternalLink_M2d8" xmlns="http://www.w3.org/2000/svg" width="9" height="9" aria-hidden="true"><path fill="currentColor" d="M9 7.91H7.33V2.9L1.22 9 0 7.78l6.11-6.1H1.08V0H9v7.91Z"></path></svg></a><a href="https://ionic.io/blog/tag/stencil" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Blog<svg class="iconExternalLink_M2d8" xmlns="http://www.w3.org/2000/svg" width="9" height="9" aria-hidden="true"><path fill="currentColor" d="M9 7.91H7.33V2.9L1.22 9 0 7.78l6.11-6.1H1.08V0H9v7.91Z"></path></svg></a><div class="navbar__item"><div class="separator"></div></div><div class="navbar__item dropdown dropdown--hoverable dropdown--right"><a href="#" aria-haspopup="true" aria-expanded="false" role="button" class="navbar__link icon-link language navbar__item"><svg width="20" height="18" viewBox="0 0 20 18" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1 3H13.1154M7.05764 1V3M10.4232 16.9998L14.4616 7.6665L18.5001 16.9998M11.6641 14.3335H17.259M10.8143 3C10.8143 3 9.79201 6.91667 7.3521 9.875C4.91218 12.8333 2.34606 14.3333 2.34606 14.3333M9.74992 12.3332C9.74992 12.3332 8.27755 11.2082 6.72106 9.20817C5.16456 7.20817 4.36528 5.6665 4.36528 5.6665" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="localeVisuallyHidden_DlPc">English</span></a><ul class="dropdown__menu"><li><a href="/docs/react" target="_self" rel="noopener noreferrer" class="dropdown__link dropdown__link--active" lang="en">English</a></li><li><a href="https://stenciljs.jp/docs/introduction" target="_blank" class="dropdown__link">æ¥æ¬èª</a></li></ul></div>
22<a href="https://twitter.com/stenciljs" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link icon-link icon-link-mask icon-link-twitter" aria-label="Twitter"></a><a href="https://chat.stenciljs.com" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link icon-link icon-link-mask icon-link-discord" aria-label="Discord"></a><a href="https://github.com/ionic-team/stencil" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link icon-link icon-link-mask icon-link-github" aria-label="GitHub repository"></a><div class="toggle_vylO colorModeToggle_DEke"><button class="clean-btn toggleButton_gllP toggleButtonDisabled_aARS" type="button" disabled="" title="Switch between dark and light mode (currently light mode)" aria-label="Switch between dark and light mode (currently light mode)" aria-live="polite"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" class="lightToggleIcon_pyhR"><path d="M4.30769 3.38462C4.30769 2.20692 4.48115 1.015 4.92308 0C1.98346 1.27962 0 4.28154 0 7.69231C0 12.2804 3.71962 16 8.30769 16C11.7185 16 14.7204 14.0165 16 11.0769C14.985 11.5188 13.7931 11.6923 12.6154 11.6923C8.02731 11.6923 4.30769 7.97269 4.30769 3.38462Z" fill="currentColor"></path></svg><svg width="16" height="16" fill="none" xmlns="http://www.w3.org/2000/svg" class="darkToggleIcon_wfgR">
22<path d="M8 3.2a.77.77 0 0 1-.77-.77V.77a.77.77 0 1 1 1.54 0v1.66A.77.77 0 0 1 8 3.2ZM8 16a.77.77 0 0 1-.77-.77v-1.67a.77.77 0 0 1 1.54 0v1.67A.77.77 0 0 1 8 16Zm3.94-11.17a.77.77 0 0 1-.55-1.3l1.18-1.19a.77.77 0 0 1 1.09 1.09L12.48 4.6a.76.76 0 0 1-.54.22Zm-9.06 9.05a.77.77 0 0 1-.54-1.3l1.18-1.19a.77.77 0 1 1 1.09 1.09l-1.18 1.18a.76.76 0 0 1-.55.22Zm12.35-5.11h-1.66a.77.77 0 0 1 0-1.54h1.66a.77.77 0 0 1 0 1.54Zm-12.8 0H.77a.77.77 0 1 1 0-1.54h1.66a.77.77 0 1 1 0 1.54Zm10.69 5.11a.76.76 0 0 1-.55-.22l-1.18-1.18a.77.77 0 0 1 1.09-1.09l1.18 1.18a.76.76 0 0 1-.54 1.31ZM4.06 4.83a.76.76 0 0 1-.54-.22L2.34 3.43a.77.77 0 0 1 1.09-1.09L4.6 3.52a.77.77 0 0 1-.55 1.31ZM8 11.55a3.55 3.55 0 1 1 0-7.1 3.55 3.55 0 0 1 0 7.1Z" fill="currentColor"></path></svg></button></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div></nav><div class="container padding-top--md padding-bottom--lg"><div class="row"><div class="col docItemCol_VOVn"><div class="docItemContainer_Djhp"><article><span class="theme-doc-version-badge badge badge--secondary">Version: v4.43</span><div class="tocCollapsible_ETCw theme-doc-toc-mobile tocMobile_ITEo"><button type="button" class="clean-btn tocCollapsibleButton_TO0P">On this page</button></div><div class="theme-doc-markdown markdown"><header><h1>React Integration</h1></header> 23<p><strong>Supports: React v17+ ⢠TypeScript v5+ ⢠Stencil v4.2.0+</strong></p> 24<p>Automate the creation of React component wrappers for your Stencil web components.</p> 25<p>This package includes an output target for code generation that allows developers to generate a React component wrapper for each Stencil component and a minimal runtime package built around <a href="https://www.npmjs.com/package/@lit/react" target="_blank" rel="noopener noreferrer">@lit/react</a> that is required to use the generated React components in your React library or application.</p> 26<ul> 27<li>â»ï¸ Automate the generation of React component wrappers for Stencil components</li> 28<li>ð Generate React functional component wrappers with JSX bindings for custom events and properties</li> 29<li>â¨ï¸ Typings and auto-completion for React components in your IDE</li> 30<li>ð Support for Server Side Rendering (SSR) when used with frameworks like <a href="https://nextjs.org/" target="_blank" rel="noopener noreferrer">Next.js</a></li> 31</ul> 32<p>To generate these framework wrappers, Stencil provides an Output Target library called <a href="https://www.npmjs.com/package/@stencil/react-output-target" target="_blank" rel="noopener noreferrer"><code>@stencil/react-output-target</code></a> that can be added to your <code>stencil.config.ts</code> file. This also enables Stencil components to be used within e.g. Next.js or other React based application frameworks.</p> 33<h2 class="anchor anchorWithStickyNavbar_LWe7" id="setup">Setup<a href="#setup" class="hash-link" aria-label="Direct link to Setup" title="Direct link to Setup">â</a></h2> 34<h3 class="anchor anchorWithStickyNavbar_LWe7" id="project-structure">Project Structure<a href="#project-structure" class="hash-link" aria-label="Direct link to Project Structure" title="Direct link to Project Structure">â</a></h3> 35<p>We recommend using a <a href="https://www.toptal.com/front-end/guide-to-monorepos" target="_blank" rel="noopener noreferrer">monorepo</a> structure for your component library with component 36wrappers. Your project workspace should contain your Stencil component library and the library for the generated React component wrappers.</p> 37<p>An example project set-up may look similar to:</p> 38<div class="codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-text codeBlock_bY9V thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#393A34"><span class="token plain">top-most-directory/</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">âââ packages/</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> âââ stencil-library/</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> â âââ stencil.config.js</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> â âââ src/components/</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> âââ react-library/</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> âââ src/</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> âââ components/</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> âââ index.ts</span><br></span></code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_eSgA" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N">
38<path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div> 39<p>This guide uses Lerna for the monorepo, but you can use other solutions such as Nx, Turborepo, etc.</p> 40<p>To use Lerna with this walk through, globally install Lerna:</p> 41<div class="tabs-container tabList__CuJ"><ul role="tablist" aria-orientation="horizontal" class="tabs"><li role="tab" tabindex="0" aria-selected="true" class="tabs__item tabItem_LNqP tabs__item--active">npm</li><li role="tab" tabindex="-1" aria-selected="false" class="tabs__item tabItem_LNqP">Yarn</li><li role="tab" tabindex="-1" aria-selected="false" class="tabs__item tabItem_LNqP">pnpm</li></ul><div class="margin-top--md"><div role="tabpanel" class="tabItem_Ymn6"><div class="language-bash codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-bash codeBlock_bY9V thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#393A34"><span class="token function" style="color:#d73a49">npm</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">install</span><span class="token plain"> </span><span class="token parameter variable" style="color:#36acaa">--global</span><span class="token plain"> lerna</span><br></span></code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_eSgA" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div></div><div role="tabpanel" class="tabItem_Ymn6" hidden=""><div class="language-bash codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-bash codeBlock_bY9V thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#393A34"><span class="token function" style="color:#d73a49">yarn</span><span class="token plain"> global </span><span class="token function" style="color:#d73a49">add</span><span class="token plain"> lerna</span><br></span></code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_eSgA" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div></div><div role="tabpanel" class="tabItem_Ymn6" hidden=""><div class="language-bash codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-bash codeBlock_bY9V thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#393A34"><span class="token function" style="color:#d73a49">pnpm</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">add</span><span class="token plain"> </span><span class="token parameter variable" style="color:#36acaa">--global</span><span class="token plain"> lerna</span><br></span></code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_eSgA" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N">
41<path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div></div></div></div> 42<h4 class="anchor anchorWithStickyNavbar_LWe7" id="creating-a-monorepo">Creating a Monorepo<a href="#creating-a-monorepo" class="hash-link" aria-label="Direct link to Creating a Monorepo" title="Direct link to Creating a Monorepo">â</a></h4> 43<div class="theme-admonition theme-admonition-note admonition_xJq3 alert alert--secondary"><div class="admonitionHeading_Gvgb"><span class="admonitionIcon_Rf37"><svg viewBox="0 0 14 16"><path fill-rule="evenodd" d="M6.3 5.69a.942.942 0 0 1-.28-.7c0-.28.09-.52.28-.7.19-.18.42-.28.7-.28.28 0 .52.09.7.28.18.19.28.42.28.7 0 .28-.09.52-.28.7a1 1 0 0 1-.7.3c-.28 0-.52-.11-.7-.3zM8 7.99c-.02-.25-.11-.48-.31-.69-.2-.19-.42-.3-.69-.31H6c-.27.02-.48.13-.69.31-.2.2-.3.44-.31.69h1v3c.02.27.11.5.31.69.2.2.42.31.69.31h1c.27 0 .48-.11.69-.31.2-.19.3-.42.31-.69H8V7.98v.01zM7 2.3c-3.14 0-5.7 2.54-5.7 5.68 0 3.14 2.56 5.7 5.7 5.7s5.7-2.55 5.7-5.7c0-3.15-2.56-5.69-5.7-5.69v.01zM7 .98c3.86 0 7 3.14 7 7s-3.14 7-7 7-7-3.12-7-7 3.14-7 7-7z"></path></svg></span>note</div><div class="admonitionContent_BuS1"><p>If you already have a monorepo, skip this section.</p></div></div> 44<div class="tabs-container tabList__CuJ"><ul role="tablist" aria-orientation="horizontal" class="tabs"><li role="tab" tabindex="0" aria-selected="true" class="tabs__item tabItem_LNqP tabs__item--active">npm</li><li role="tab" tabindex="-1" aria-selected="false" class="tabs__item tabItem_LNqP">Yarn</li><li role="tab" tabindex="-1" aria-selected="false" class="tabs__item tabItem_LNqP">pnpm</li></ul><div class="margin-top--md"><div role="tabpanel" class="tabItem_Ymn6"><div class="language-bash codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-bash codeBlock_bY9V thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#393A34"><span class="token comment" style="color:#999988;font-style:italic"># From your top-most-directory/, initialize a workspace</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">lerna init</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token comment" style="color:#999988;font-style:italic"># install dependencies</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token function" style="color:#d73a49">npm</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">install</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token comment" style="color:#999988;font-style:italic"># install typescript and node types</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token function" style="color:#d73a49">npm</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">install</span><span class="token plain"> typescript @types/node --save-dev</span><br></span></code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_eSgA" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N">
44<path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div></div><div role="tabpanel" class="tabItem_Ymn6" hidden=""><div class="language-bash codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-bash codeBlock_bY9V thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#393A34"><span class="token comment" style="color:#999988;font-style:italic"># From your top-most-directory/, initialize a workspace</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">lerna init</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token comment" style="color:#999988;font-style:italic"># install dependencies</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token function" style="color:#d73a49">yarn</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">install</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token comment" style="color:#999988;font-style:italic"># install typescript and node types</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token function" style="color:#d73a49">yarn</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">add</span><span class="token plain"> typescript @types/node </span><span class="token parameter variable" style="color:#36acaa">--dev</span><br></span></code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_eSgA" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div></div><div role="tabpanel" class="tabItem_Ymn6" hidden=""><div class="language-bash codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-bash codeBlock_bY9V thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#393A34"><span class="token comment" style="color:#999988;font-style:italic"># From your top-most-directory/, initialize a workspace</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">lerna init</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token comment" style="color:#999988;font-style:italic"># install dependencies</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token function" style="color:#d73a49">pnpm</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">install</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token comment" style="color:#999988;font-style:italic"># install typescript and node types</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token function" style="color:#d73a49">pnpm</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">add</span><span class="token plain"> typescript @types/node --save-dev</span><br></span></code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_eSgA" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N">
44<path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div></div></div></div> 45<h4 class="anchor anchorWithStickyNavbar_LWe7" id="creating-a-stencil-component-library">Creating a Stencil Component Library<a href="#creating-a-stencil-component-library" class="hash-link" aria-label="Direct link to Creating a Stencil Component Library" title="Direct link to Creating a Stencil Component Library">â</a></h4> 46<div class="theme-admonition theme-admonition-note admonition_xJq3 alert alert--secondary"><div class="admonitionHeading_Gvgb"><span class="admonitionIcon_Rf37"><svg viewBox="0 0 14 16"><path fill-rule="evenodd" d="M6.3 5.69a.942.942 0 0 1-.28-.7c0-.28.09-.52.28-.7.19-.18.42-.28.7-.28.28 0 .52.09.7.28.18.19.28.42.28.7 0 .28-.09.52-.28.7a1 1 0 0 1-.7.3c-.28 0-.52-.11-.7-.3zM8 7.99c-.02-.25-.11-.48-.31-.69-.2-.19-.42-.3-.69-.31H6c-.27.02-.48.13-.69.31-.2.2-.3.44-.31.69h1v3c.02.27.11.5.31.69.2.2.42.31.69.31h1c.27 0 .48-.11.69-.31.2-.19.3-.42.31-.69H8V7.98v.01zM7 2.3c-3.14 0-5.7 2.54-5.7 5.68 0 3.14 2.56 5.7 5.7 5.7s5.7-2.55 5.7-5.7c0-3.15-2.56-5.69-5.7-5.69v.01zM7 .98c3.86 0 7 3.14 7 7s-3.14 7-7 7-7-3.12-7-7 3.14-7 7-7z"></path></svg></span>note</div><div class="admonitionContent_BuS1"><p>If you already have a Stencil component library, skip this section.</p></div></div> 47<p>From the <code>packages/</code> directory, run the following commands to create a Stencil component library:</p> 48<div class="tabs-container tabList__CuJ"><ul role="tablist" aria-orientation="horizontal" class="tabs"><li role="tab" tabindex="0" aria-selected="true" class="tabs__item tabItem_LNqP tabs__item--active">npm</li><li role="tab" tabindex="-1" aria-selected="false" class="tabs__item tabItem_LNqP">Yarn</li><li role="tab" tabindex="-1" aria-selected="false" class="tabs__item tabItem_LNqP">pnpm</li></ul><div class="margin-top--md"><div role="tabpanel" class="tabItem_Ymn6"><div class="language-bash codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-bash codeBlock_bY9V thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#393A34"><span class="token function" style="color:#d73a49">npm</span><span class="token plain"> init stencil components stencil-library</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token builtin class-name">cd</span><span class="token plain"> stencil-library</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token comment" style="color:#999988;font-style:italic"># Install dependencies</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token function" style="color:#d73a49">npm</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">install</span><br></span></code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_eSgA" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div></div><div role="tabpanel" class="tabItem_Ymn6" hidden=""><div class="language-bash codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-bash codeBlock_bY9V thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#393A34"><span class="token function" style="color:#d73a49">yarn</span><span class="token plain"> create stencil components stencil-library</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token builtin class-name">cd</span><span class="token plain"> stencil-library</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token comment" style="color:#999988;font-style:italic"># Install dependencies</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token function" style="color:#d73a49">yarn</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">install</span><br></span></code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_eSgA" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N">
48<path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div></div><div role="tabpanel" class="tabItem_Ymn6" hidden=""><div class="language-bash codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-bash codeBlock_bY9V thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#393A34"><span class="token function" style="color:#d73a49">pnpm</span><span class="token plain"> create stencil components stencil-library</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token builtin class-name">cd</span><span class="token plain"> stencil-library</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token comment" style="color:#999988;font-style:italic"># Install dependencies</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token function" style="color:#d73a49">pnpm</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">install</span><br></span></code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_eSgA" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div></div></div></div> 49<h5 class="anchor anchorWithStickyNavbar_LWe7" id="component-imports">Component Imports<a href="#component-imports" class="hash-link" aria-label="Direct link to Component Imports" title="Direct link to Component Imports">â</a></h5> 50<p>If you encounter import errors in your <code>components.ts</code> file, update the Stencil library's <code>package.json</code> to include comprehensive exports:</p> 51<div class="language-json codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockTitle_Ktv7">package.json</div><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-json codeBlock_bY9V thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#393A34"><span class="token property" style="color:#36acaa">"exports"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token property" style="color:#36acaa">"."</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token property" style="color:#36acaa">"import"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"./dist/stencil-library/stencil-library.esm.js"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token property" style="color:#36acaa">"require"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"./dist/stencil-library/stencil-library.cjs.js"</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token property" style="color:#36acaa">"./dist/*"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">
51{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token property" style="color:#36acaa">"import"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"./dist/*"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token property" style="color:#36acaa">"types"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"./dist/*"</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token property" style="color:#36acaa">"./components/*"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token property" style="color:#36acaa">"import"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"./dist/components/*.js"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token property" style="color:#36acaa">"types"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"./dist/components/*.d.ts"</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token property" style="color:#36acaa">"./loader"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token property" style="color:#36acaa">"import"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"./loader/index.js"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token property" style="color:#36acaa">"require"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"./loader/index.cjs"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token property" style="color:#36acaa">"types"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"./loader/index.d.ts"</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><br></span></code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_eSgA" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N">
51<path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div> 52<h4 class="anchor anchorWithStickyNavbar_LWe7" id="creating-a-react-component-library">Creating a React Component Library<a href="#creating-a-react-component-library" class="hash-link" aria-label="Direct link to Creating a React Component Library" title="Direct link to Creating a React Component Library">â</a></h4> 53<div class="theme-admonition theme-admonition-note admonition_xJq3 alert alert--secondary"><div class="admonitionHeading_Gvgb"><span class="admonitionIcon_Rf37"><svg viewBox="0 0 14 16"><path fill-rule="evenodd" d="M6.3 5.69a.942.942 0 0 1-.28-.7c0-.28.09-.52.28-.7.19-.18.42-.28.7-.28.28 0 .52.09.7.28.18.19.28.42.28.7 0 .28-.09.52-.28.7a1 1 0 0 1-.7.3c-.28 0-.52-.11-.7-.3zM8 7.99c-.02-.25-.11-.48-.31-.69-.2-.19-.42-.3-.69-.31H6c-.27.02-.48.13-.69.31-.2.2-.3.44-.31.69h1v3c.02.27.11.5.31.69.2.2.42.31.69.31h1c.27 0 .48-.11.69-.31.2-.19.3-.42.31-.69H8V7.98v.01zM7 2.3c-3.14 0-5.7 2.54-5.7 5.68 0 3.14 2.56 5.7 5.7 5.7s5.7-2.55 5.7-5.7c0-3.15-2.56-5.69-5.7-5.69v.01zM7 .98c3.86 0 7 3.14 7 7s-3.14 7-7 7-7-3.12-7-7 3.14-7 7-7z"></path></svg></span>note</div><div class="admonitionContent_BuS1"><p>If you already have a React component library, skip this section.</p></div></div> 54<p>The first time you want to create the component wrappers, you will need to have a React library package to write to.</p> 55<p>Run the following commands from the root directory of your monorepo to create a React component library:</p> 56<div class="tabs-container tabList__CuJ"><ul role="tablist" aria-orientation="horizontal" class="tabs"><li role="tab" tabindex="0" aria-selected="true" class="tabs__item tabItem_LNqP tabs__item--active">npm</li><li role="tab" tabindex="-1" aria-selected="false" class="tabs__item tabItem_LNqP">Yarn</li><li role="tab" tabindex="-1" aria-selected="false" class="tabs__item tabItem_LNqP">pnpm</li></ul><div class="margin-top--md"><div role="tabpanel" class="tabItem_Ymn6"><div class="language-bash codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-bash codeBlock_bY9V thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#393A34"><span class="token comment" style="color:#999988;font-style:italic"># Create a project</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">lerna create react-library </span><span class="token comment" style="color:#999988;font-style:italic"># fill out the prompts accordingly</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token builtin class-name">cd</span><span class="token plain"> packages/react-library</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token comment" style="color:#999988;font-style:italic"># Install core dependencies</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token function" style="color:#d73a49">npm</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">install</span><span class="token plain"> react react-dom typescript @types/react --save-dev</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token comment" style="color:#999988;font-style:italic"># Install output target runtime dependency</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token function" style="color:#d73a49">npm</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">install</span><span class="token plain"> @stencil/react-output-target </span><span class="token parameter variable" style="color:#36acaa">--save</span><br></span></code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_eSgA" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N">
56<path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div></div><div role="tabpanel" class="tabItem_Ymn6" hidden=""><div class="language-bash codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-bash codeBlock_bY9V thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#393A34"><span class="token comment" style="color:#999988;font-style:italic"># Create a project</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">lerna create react-library </span><span class="token comment" style="color:#999988;font-style:italic"># fill out the prompts accordingly</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token builtin class-name">cd</span><span class="token plain"> packages/react-library</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token comment" style="color:#999988;font-style:italic"># Install core dependencies</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token function" style="color:#d73a49">yarn</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">add</span><span class="token plain"> react react-dom typescript @types/react </span><span class="token parameter variable" style="color:#36acaa">--dev</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token comment" style="color:#999988;font-style:italic"># Install output target runtime dependency</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token function" style="color:#d73a49">yarn</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">add</span><span class="token plain"> @stencil/react-output-target</span><br></span></code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_eSgA" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div></div><div role="tabpanel" class="tabItem_Ymn6" hidden=""><div class="language-bash codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-bash codeBlock_bY9V thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#393A34"><span class="token comment" style="color:#999988;font-style:italic"># Create a project</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">lerna create react-library </span><span class="token comment" style="color:#999988;font-style:italic"># fill out the prompts accordingly</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token builtin class-name">cd</span><span class="token plain"> packages/react-library</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token comment" style="color:#999988;font-style:italic">
56# Install core dependencies</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token function" style="color:#d73a49">pnpm</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">add</span><span class="token plain"> react react-dom typescript @types/react --save-dev</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token comment" style="color:#999988;font-style:italic"># Install output target runtime dependency</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token function" style="color:#d73a49">pnpm</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">add</span><span class="token plain"> @stencil/react-output-target</span><br></span></code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_eSgA" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div></div></div></div> 57<p>Lerna does not ship with a TypeScript configuration. At the root of the workspace, create a <code>tsconfig.json</code>:</p> 58<div class="language-json codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockTitle_Ktv7">tsconfig.json</div><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-json codeBlock_bY9V thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#393A34"><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token property" style="color:#36acaa">"compilerOptions"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token property" style="color:#36acaa">"module"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"commonjs"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token property" style="color:#36acaa">"declaration"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token boolean" style="color:#36acaa">true</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token property" style="color:#36acaa">"noImplicitAny"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token boolean" style="color:#36acaa">false</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token property" style="color:#36acaa">"removeComments"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token boolean" style="color:#36acaa">true</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token property" style="color:#36acaa">"noLib"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token boolean" style="color:#36acaa">
58false</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token property" style="color:#36acaa">"emitDecoratorMetadata"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token boolean" style="color:#36acaa">true</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token property" style="color:#36acaa">"experimentalDecorators"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token boolean" style="color:#36acaa">true</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token property" style="color:#36acaa">"target"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"es6"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token property" style="color:#36acaa">"sourceMap"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token boolean" style="color:#36acaa">true</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token property" style="color:#36acaa">"lib"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">[</span><span class="token string" style="color:#e3116c">"es6"</span><span class="token punctuation" style="color:#393A34">]</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token property" style="color:#36acaa">"exclude"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">[</span><span class="token string" style="color:#e3116c">"node_modules"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"**/*.spec.ts"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"**/__tests__/**"</span><span class="token punctuation" style="color:#393A34">]</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><br></span></code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_eSgA" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div> 59<p>In your <code>react-library</code> project, create a project specific <code>tsconfig.json</code> that will extend the root config:</p> 60<div class="language-json codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockTitle_Ktv7">packages/react-library/tsconfig.json</div><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-json codeBlock_bY9V thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#393A34"><span class="token punctuation" style="color:#393A34">
60{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token property" style="color:#36acaa">"extends"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"../../tsconfig.json"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token property" style="color:#36acaa">"compilerOptions"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token property" style="color:#36acaa">"outDir"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"./dist"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token property" style="color:#36acaa">"target"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"ES2020"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token property" style="color:#36acaa">"useDefineForClassFields"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token boolean" style="color:#36acaa">true</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token property" style="color:#36acaa">"lib"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">[</span><span class="token string" style="color:#e3116c">"ES2020"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"DOM"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"DOM.Iterable"</span><span class="token punctuation" style="color:#393A34">]</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token property" style="color:#36acaa">"module"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"ESNext"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token property" style="color:#36acaa">"moduleResolution"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"bundler"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token property" style="color:#36acaa">"skipLibCheck"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token boolean" style="color:#36acaa">true</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token property" style="color:#36acaa">"jsx"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"react"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token property" style="color:#36acaa">"allowSyntheticDefaultImports"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token boolean" style="color:#36acaa">true</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token property" style="color:#36acaa">"declarationDir"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"./dist/types"</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token property" style="color:#36acaa">"include"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">[</span><span class="token string" style="color:#e3116c">"lib"</span><span class="token punctuation" style="color:#393A34">]</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token property" style="color:#36acaa">"exclude"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">[</span><span class="token string" style="color:#e3116c">"node_modules"</span><span class="token punctuation" style="color:#393A34">]</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><br></span></code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_eSgA" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N">
60<path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div> 61<p>Update the generated <code>package.json</code> in your <code>react-library</code>, adding the following options to the existing config:</p> 62<div class="language-diff codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockTitle_Ktv7">packages/react-library/package.json</div><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-diff codeBlock_bY9V thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#393A34"><span class="token plain">{</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token deleted-sign deleted prefix deleted" style="color:#d73a49">-</span><span class="token deleted-sign deleted line" style="color:#d73a49"> "main": "lib/react-library.js",</span><br></span><span class="token-line" style="color:#393A34"><span class="token deleted-sign deleted line" style="color:#d73a49"></span><span class="token inserted-sign inserted prefix inserted" style="color:#36acaa">+</span><span class="token inserted-sign inserted line" style="color:#36acaa"> "main": "dist/index.js",</span><br></span><span class="token-line" style="color:#393A34"><span class="token inserted-sign inserted line" style="color:#36acaa"></span><span class="token inserted-sign inserted prefix inserted" style="color:#36acaa">+</span><span class="token inserted-sign inserted line" style="color:#36acaa"> "module": "dist/index.js",</span><br></span><span class="token-line" style="color:#393A34"><span class="token inserted-sign inserted line" style="color:#36acaa"></span><span class="token inserted-sign inserted prefix inserted" style="color:#36acaa">+</span><span class="token inserted-sign inserted line" style="color:#36acaa"> "types": "dist/types/index.d.ts",</span><br></span><span class="token-line" style="color:#393A34"><span class="token inserted-sign inserted line" style="color:#36acaa"></span><span class="token unchanged prefix unchanged"> </span><span class="token unchanged line"> "scripts": {</span><br></span><span class="token-line" style="color:#393A34"><span class="token unchanged line"></span><span class="token deleted-sign deleted prefix deleted" style="color:#d73a49">-</span><span class="token deleted-sign deleted line" style="color:#d73a49"> "test": "node ./__tests__/react-library.test.js"</span><br></span><span class="token-line" style="color:#393A34"><span class="token deleted-sign deleted line" style="color:#d73a49"></span><span class="token inserted-sign inserted prefix inserted" style="color:#36acaa">+</span><span class="token inserted-sign inserted line" style="color:#36acaa"> "test": "node ./__tests__/react-library.test.js",</span><br></span><span class="token-line" style="color:#393A34"><span class="token inserted-sign inserted line" style="color:#36acaa"></span><span class="token inserted-sign inserted prefix inserted" style="color:#36acaa">+</span><span class="token inserted-sign inserted line" style="color:#36acaa"> "build": "npm run tsc",</span><br></span><span class="token-line" style="color:#393A34"><span class="token inserted-sign inserted line" style="color:#36acaa"></span><span class="token inserted-sign inserted prefix inserted" style="color:#36acaa">+</span><span class="token inserted-sign inserted line" style="color:#36acaa"> "tsc": "tsc -p . --outDir ./dist"</span><br></span><span class="token-line" style="color:#393A34"><span class="token inserted-sign inserted line" style="color:#36acaa"></span><span class="token deleted-sign deleted prefix deleted" style="color:#d73a49">-</span><span class="token deleted-sign deleted line" style="color:#d73a49"> }</span><br></span><span class="token-line" style="color:#393A34"><span class="token deleted-sign deleted line" style="color:#d73a49"></span><span class="token inserted-sign inserted prefix inserted" style="color:#36acaa">+</span><span class="token inserted-sign inserted line" style="color:#36acaa"> },</span><br></span><span class="token-line" style="color:#393A34"><span class="token inserted-sign inserted line" style="color:#36acaa"></span><span class="token unchanged prefix unchanged"> </span><span class="token unchanged line"> "files": [</span><br></span><span class="token-line" style="color:#393A34"><span class="token unchanged line"></span><span class="token deleted-sign deleted prefix deleted" style="color:#d73a49">-</span><span class="token deleted-sign deleted line" style="color:#d73a49"> "lib"</span><br></span><span class="token-line" style="color:#393A34"><span class="token deleted-sign deleted line" style="color:#d73a49"></span><span class="token inserted-sign inserted prefix inserted" style="color:#36acaa">+</span><span class="token inserted-sign inserted line" style="color:#36acaa"> "dist"</span><br></span><span class="token-line" style="color:#393A34"><span class="token inserted-sign inserted line" style="color:#36acaa"></span><span class="token unchanged prefix unchanged"> </span><span class="token unchanged line"> ],</span><br></span><span class="token-line" style="color:#393A34"><span class="token unchanged line"></span><span class="token inserted-sign inserted prefix inserted" style="color:#36acaa">+</span><span class="token inserted-sign inserted line" style="color:#36acaa"> "publishConfig": {</span><br></span><span class="token-line" style="color:#393A34"><span class="token inserted-sign inserted line" style="color:#36acaa"></span><span class="token inserted-sign inserted prefix inserted" style="color:#36acaa">+</span><span class="token inserted-sign inserted line" style="color:#36acaa"> "access": "public"</span><br></span><span class="token-line" style="color:#393A34"><span class="token inserted-sign inserted line" style="color:#36acaa"></span><span class="token inserted-sign inserted prefix inserted" style="color:#36acaa">+</span><span class="token inserted-sign inserted line" style="color:#36acaa"> },</span><br></span><span class="token-line" style="color:#393A34"><span class="token inserted-sign inserted line" style="color:#36acaa"></span><span class="token inserted-sign inserted prefix inserted" style="color:#36acaa">+</span><span class="token inserted-sign inserted line" style="color:#36acaa"> "dependencies": {</span><br></span><span class="token-line" style="color:#393A34"><span class="token inserted-sign inserted line" style="color:#36acaa"></span><span class="token inserted-sign inserted prefix inserted" style="color:#36acaa">+</span><span class="token inserted-sign inserted line" style="color:#36acaa"> "stencil-library": "*"</span><br></span><span class="token-line" style="color:#393A34"><span class="token inserted-sign inserted line" style="color:#36acaa"></span><span class="token inserted-sign inserted prefix inserted" style="color:#36acaa">+</span><span class="token inserted-sign inserted line" style="color:#36acaa"> }</span><br></span><span class="token-line" style="color:#393A34"><span class="token inserted-sign inserted line" style="color:#36acaa"></span><span class="token plain">}</span><br></span></code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_eSgA" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N">
62<path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div> 63<div class="theme-admonition theme-admonition-note admonition_xJq3 alert alert--secondary"><div class="admonitionHeading_Gvgb"><span class="admonitionIcon_Rf37"><svg viewBox="0 0 14 16"><path fill-rule="evenodd" d="M6.3 5.69a.942.942 0 0 1-.28-.7c0-.28.09-.52.28-.7.19-.18.42-.28.7-.28.28 0 .52.09.7.28.18.19.28.42.28.7 0 .28-.09.52-.28.7a1 1 0 0 1-.7.3c-.28 0-.52-.11-.7-.3zM8 7.99c-.02-.25-.11-.48-.31-.69-.2-.19-.42-.3-.69-.31H6c-.27.02-.48.13-.69.31-.2.2-.3.44-.31.69h1v3c.02.27.11.5.31.69.2.2.42.31.69.31h1c.27 0 .48-.11.69-.31.2-.19.3-.42.31-.69H8V7.98v.01zM7 2.3c-3.14 0-5.7 2.54-5.7 5.68 0 3.14 2.56 5.7 5.7 5.7s5.7-2.55 5.7-5.7c0-3.15-2.56-5.69-5.7-5.69v.01zM7 .98c3.86 0 7 3.14 7 7s-3.14 7-7 7-7-3.12-7-7 3.14-7 7-7z"></path></svg></span>note</div><div class="admonitionContent_BuS1"><p>The <code>stencil-library</code> dependency is how Lerna knows to resolve the internal Stencil library dependency. See Lerna's documentation on 64<a href="https://lerna.js.org/docs/getting-started#package-dependency-management" target="_blank" rel="noopener noreferrer">package dependency management</a> for more information.</p></div></div> 65<h3 class="anchor anchorWithStickyNavbar_LWe7" id="adding-the-react-output-target">Adding the React Output Target<a href="#adding-the-react-output-target" class="hash-link" aria-label="Direct link to Adding the React Output Target" title="Direct link to Adding the React Output Target">â</a></h3> 66<h4 class="anchor anchorWithStickyNavbar_LWe7" id="step-1---stencil-component-library">Step 1 - Stencil Component Library<a href="#step-1---stencil-component-library" class="hash-link" aria-label="Direct link to Step 1 - Stencil Component Library" title="Direct link to Step 1 - Stencil Component Library">â</a></h4> 67<p>Install the <code>@stencil/react-output-target</code> dependency to your Stencil component library package.</p> 68<div class="tabs-container tabList__CuJ"><ul role="tablist" aria-orientation="horizontal" class="tabs"><li role="tab" tabindex="0" aria-selected="true" class="tabs__item tabItem_LNqP tabs__item--active">npm</li><li role="tab" tabindex="-1" aria-selected="false" class="tabs__item tabItem_LNqP">Yarn</li><li role="tab" tabindex="-1" aria-selected="false" class="tabs__item tabItem_LNqP">pnpm</li></ul><div class="margin-top--md"><div role="tabpanel" class="tabItem_Ymn6"><div class="language-bash codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-bash codeBlock_bY9V thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#393A34"><span class="token comment" style="color:#999988;font-style:italic"># Install dependency</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token function" style="color:#d73a49">npm</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">install</span><span class="token plain"> @stencil/react-output-target --save-dev</span><br></span></code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_eSgA" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div></div><div role="tabpanel" class="tabItem_Ymn6" hidden=""><div class="language-bash codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-bash codeBlock_bY9V thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#393A34"><span class="token comment" style="color:#999988;font-style:italic"># Install dependency</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token function" style="color:#d73a49">yarn</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">add</span><span class="token plain"> @stencil/react-output-target </span><span class="token parameter variable" style="color:#36acaa">--dev</span><br></span></code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_eSgA" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N">
68<path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div></div><div role="tabpanel" class="tabItem_Ymn6" hidden=""><div class="language-bash codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-bash codeBlock_bY9V thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#393A34"><span class="token comment" style="color:#999988;font-style:italic"># Install dependency</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token function" style="color:#d73a49">pnpm</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">add</span><span class="token plain"> @stencil/react-output-target --save-dev</span><br></span></code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_eSgA" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div></div></div></div> 69<p>In your project's <code>stencil.config.ts</code>, add the <code>reactOutputTarget</code> configuration to the <code>outputTargets</code> array:</p> 70<div class="language-ts codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockTitle_Ktv7">stencil.config.ts</div><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-ts codeBlock_bY9V thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#393A34"><span class="token keyword module" style="color:#00009f">import</span><span class="token plain"> </span><span class="token imports punctuation" style="color:#393A34">{</span><span class="token imports"> reactOutputTarget </span><span class="token imports punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token keyword module" style="color:#00009f">from</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">'@stencil/react-output-target'</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword module" style="color:#00009f">export</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> config</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token maybe-class-name">Config</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> namespace</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">'stencil-library'</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> outputTargets</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">[</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token function" style="color:#d73a49">reactOutputTarget</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">
70{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token comment" style="color:#999988;font-style:italic">// Relative path to where the React components will be generated</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> outDir</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">'../react-library/lib/components/stencil-generated/'</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token comment" style="color:#999988;font-style:italic">// dist-custom-elements output target is required for the React output target</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> type</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">'dist-custom-elements'</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">]</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">;</span><br></span></code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_eSgA" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div> 71<div class="theme-admonition theme-admonition-tip admonition_xJq3 alert alert--success"><div class="admonitionHeading_Gvgb"><span class="admonitionIcon_Rf37"><svg viewBox="0 0 12 16"><path fill-rule="evenodd" d="M6.5 0C3.48 0 1 2.19 1 5c0 .92.55 2.25 1 3 1.34 2.25 1.78 2.78 2 4v1h5v-1c.22-1.22.66-1.75 2-4 .45-.75 1-2.08 1-3 0-2.81-2.48-5-5.5-5zm3.64 7.48c-.25.44-.47.8-.67 1.11-.86 1.41-1.25 2.06-1.45 3.23-.02.05-.02.11-.02.17H5c0-.06 0-.13-.02-.17-.2-1.17-.59-1.83-1.45-3.23-.2-.31-.42-.67-.67-1.11C2.44 6.78 2 5.65 2 5c0-2.2 2.02-4 4.5-4 1.22 0 2.36.42 3.22 1.19C10.55 2.94 11 3.94 11 5c0 .66-.44 1.78-.86 2.48zM4 14h5c-.23 1.14-1.3 2-2.5 2s-2.27-.86-2.5-2z"></path></svg></span>tip</div><div class="admonitionContent_BuS1"><p>The <code>outDir</code> is the relative path to the file that will be generated with all of the React component wrappers. You will replace the 72file path to match your project's structure and respective names.</p></div></div> 73<p>See the <a href="#api">API section below</a> for details on each of the output target's options.</p> 74<div class="theme-admonition theme-admonition-note admonition_xJq3 alert alert--secondary"><div class="admonitionHeading_Gvgb"><span class="admonitionIcon_Rf37"><svg viewBox="0 0 14 16"><path fill-rule="evenodd" d="M6.3 5.69a.942.942 0 0 1-.28-.7c0-.28.09-.52.28-.7.19-.18.42-.28.7-.28.28 0 .52.09.7.28.18.19.28.42.28.7 0 .28-.09.52-.28.7a1 1 0 0 1-.7.3c-.28 0-.52-.11-.7-.3zM8 7.99c-.02-.25-.11-.48-.31-.69-.2-.19-.42-.3-.69-.31H6c-.27.02-.48.13-.69.31-.2.2-.3.44-.31.69h1v3c.02.27.11.5.31.69.2.2.42.31.69.31h1c.27 0 .48-.11.69-.31.2-.19.3-.42.31-.
7469H8V7.98v.01zM7 2.3c-3.14 0-5.7 2.54-5.7 5.68 0 3.14 2.56 5.7 5.7 5.7s5.7-2.55 5.7-5.7c0-3.15-2.56-5.69-5.7-5.69v.01zM7 .98c3.86 0 7 3.14 7 7s-3.14 7-7 7-7-3.12-7-7 3.14-7 7-7z"></path></svg></span>note</div><div class="admonitionContent_BuS1"><p>In order to compile Stencil components optimized for server side rendering in e.g. Next.js applications that use <a href="https://nextjs.org/docs/app" target="_blank" rel="noopener noreferrer">AppRouter</a>, make sure to provide the <a href="#hydratemodule"><code>hydrateModule</code></a> property to the output target configuration.</p></div></div> 75<p>You can now build your Stencil component library to generate the component wrappers.</p> 76<div class="tabs-container tabList__CuJ"><ul role="tablist" aria-orientation="horizontal" class="tabs"><li role="tab" tabindex="0" aria-selected="true" class="tabs__item tabItem_LNqP tabs__item--active">npm</li><li role="tab" tabindex="-1" aria-selected="false" class="tabs__item tabItem_LNqP">Yarn</li><li role="tab" tabindex="-1" aria-selected="false" class="tabs__item tabItem_LNqP">pnpm</li></ul><div class="margin-top--md"><div role="tabpanel" class="tabItem_Ymn6"><div class="language-bash codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-bash codeBlock_bY9V thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#393A34"><span class="token comment" style="color:#999988;font-style:italic"># Build the library and wrappers</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token function" style="color:#d73a49">npm</span><span class="token plain"> run build</span><br></span></code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_eSgA" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div></div><div role="tabpanel" class="tabItem_Ymn6" hidden=""><div class="language-bash codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-bash codeBlock_bY9V thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#393A34"><span class="token comment" style="color:#999988;font-style:italic"># Build the library and wrappers</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token function" style="color:#d73a49">yarn</span><span class="token plain"> build</span><br></span></code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_eSgA" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div></div><div role="tabpanel" class="tabItem_Ymn6" hidden=""><div class="language-bash codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-bash codeBlock_bY9V thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#393A34"><span class="token comment" style="color:#999988;font-style:italic"># Build the library and wrappers</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token function" style="color:#d73a49">pnpm</span><span class="token plain"> run build</span><br></span></code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_eSgA" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N">
76<path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div></div></div></div> 77<p>If the build is successful, youâll see the new generated file in your React component library at the location specified by the <code>outDir</code> argument.</p> 78<h4 class="anchor anchorWithStickyNavbar_LWe7" id="step-2---react-component-library">Step 2 - React Component Library<a href="#step-2---react-component-library" class="hash-link" aria-label="Direct link to Step 2 - React Component Library" title="Direct link to Step 2 - React Component Library">â</a></h4> 79<p>Install the <code>@stencil/react-output-target</code> dependency to your React component library package. This step is required to add the runtime dependencies required to use the generated React components.</p> 80<div class="tabs-container tabList__CuJ"><ul role="tablist" aria-orientation="horizontal" class="tabs"><li role="tab" tabindex="0" aria-selected="true" class="tabs__item tabItem_LNqP tabs__item--active">npm</li><li role="tab" tabindex="-1" aria-selected="false" class="tabs__item tabItem_LNqP">Yarn</li><li role="tab" tabindex="-1" aria-selected="false" class="tabs__item tabItem_LNqP">pnpm</li></ul><div class="margin-top--md"><div role="tabpanel" class="tabItem_Ymn6"><div class="language-bash codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-bash codeBlock_bY9V thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#393A34"><span class="token comment" style="color:#999988;font-style:italic"># Install dependency</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token function" style="color:#d73a49">npm</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">install</span><span class="token plain"> @stencil/react-output-target </span><span class="token parameter variable" style="color:#36acaa">--save</span><br></span></code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_eSgA" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div></div><div role="tabpanel" class="tabItem_Ymn6" hidden=""><div class="language-bash codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-bash codeBlock_bY9V thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#393A34"><span class="token comment" style="color:#999988;font-style:italic"># Install dependency</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token function" style="color:#d73a49">yarn</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">add</span><span class="token plain"> @stencil/react-output-target</span><br></span></code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_eSgA" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N">
80<path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div></div><div role="tabpanel" class="tabItem_Ymn6" hidden=""><div class="language-bash codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-bash codeBlock_bY9V thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#393A34"><span class="token comment" style="color:#999988;font-style:italic"># Install dependency</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token function" style="color:#d73a49">pnpm</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">add</span><span class="token plain"> @stencil/react-output-target</span><br></span></code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_eSgA" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div></div></div></div> 81<p>Verify or update your <code>tsconfig.json</code> file to include the following settings:</p> 82<div class="language-json codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-json codeBlock_bY9V thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#393A34"><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token property" style="color:#36acaa">"compilerOptions"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token property" style="color:#36acaa">"module"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"esnext"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token property" style="color:#36acaa">"moduleResolution"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"bundler"</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><br></span></code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_eSgA" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N">
82<path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div> 83<div class="theme-admonition theme-admonition-info admonition_xJq3 alert alert--info"><div class="admonitionHeading_Gvgb"><span class="admonitionIcon_Rf37"><svg viewBox="0 0 14 16"><path fill-rule="evenodd" d="M7 2.3c3.14 0 5.7 2.56 5.7 5.7s-2.56 5.7-5.7 5.7A5.71 5.71 0 0 1 1.3 8c0-3.14 2.56-5.7 5.7-5.7zM7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7zm1 3H6v5h2V4zm0 6H6v2h2v-2z"></path></svg></span>info</div><div class="admonitionContent_BuS1"><p><code>moduleResolution": "bundler"</code> is required to resolve the secondary entry points in the <code>@stencil/react-output-target</code> runtime package. You can learn more about this setting in the <a href="https://www.typescriptlang.org/docs/handbook/modules/theory.html#module-resolution" target="_blank" rel="noopener noreferrer">TypeScript documentation</a>.</p></div></div> 84<p>Verify or install TypeScript v5.0 or later in your project:</p> 85<div class="tabs-container tabList__CuJ"><ul role="tablist" aria-orientation="horizontal" class="tabs"><li role="tab" tabindex="0" aria-selected="true" class="tabs__item tabItem_LNqP tabs__item--active">npm</li><li role="tab" tabindex="-1" aria-selected="false" class="tabs__item tabItem_LNqP">Yarn</li><li role="tab" tabindex="-1" aria-selected="false" class="tabs__item tabItem_LNqP">pnpm</li></ul><div class="margin-top--md"><div role="tabpanel" class="tabItem_Ymn6"><div class="language-bash codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-bash codeBlock_bY9V thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#393A34"><span class="token comment" style="color:#999988;font-style:italic"># Install dependency</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token function" style="color:#d73a49">npm</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">install</span><span class="token plain"> typescript@5 --save-dev</span><br></span></code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_eSgA" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div></div><div role="tabpanel" class="tabItem_Ymn6" hidden=""><div class="language-bash codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-bash codeBlock_bY9V thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#393A34"><span class="token comment" style="color:#999988;font-style:italic"># Install dependency</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token function" style="color:#d73a49">yarn</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">add</span><span class="token plain"> typescript@5 </span><span class="token parameter variable" style="color:#36acaa">--dev</span><br></span></code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_eSgA" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N">
85<path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div></div><div role="tabpanel" class="tabItem_Ymn6" hidden=""><div class="language-bash codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-bash codeBlock_bY9V thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#393A34"><span class="token comment" style="color:#999988;font-style:italic"># Install dependency</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token function" style="color:#d73a49">pnpm</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">add</span><span class="token plain"> typescript@5 --save-dev</span><br></span></code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_eSgA" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div></div></div></div> 86<p>No additional configuration is needed in the React component library. The generated component wrappers will reference the runtime dependencies directly.</p> 87<h3 class="anchor anchorWithStickyNavbar_LWe7" id="add-the-components-to-your-react-component-librarys-entry-file">Add the Components to your React Component Library's Entry File<a href="#add-the-components-to-your-react-component-librarys-entry-file" class="hash-link" aria-label="Direct link to Add the Components to your React Component Library's Entry File" title="Direct link to Add the Components to your React Component Library's Entry File">â</a></h3> 88<p>In order to make the generated files available within your React component library and its consumers, youâll need to export everything from within your entry file. First, rename <code>react-library.js</code> to <code>index.ts</code>. Then, modify the contents to match the following:</p> 89<div class="language-tsx codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockTitle_Ktv7">packages/react-library/src/index.ts</div><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-tsx codeBlock_bY9V thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#393A34"><span class="token keyword" style="color:#00009f">export</span><span class="token plain"> </span><span class="token exports operator" style="color:#393A34">*</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">from</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">'./components/stencil-generated/components'</span><span class="token punctuation" style="color:#393A34">;</span><br></span></code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_eSgA" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS">
89<path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div> 90<h3 class="anchor anchorWithStickyNavbar_LWe7" id="link-your-packages-optional">Link Your Packages (Optional)<a href="#link-your-packages-optional" class="hash-link" aria-label="Direct link to Link Your Packages (Optional)" title="Direct link to Link Your Packages (Optional)">â</a></h3> 91<div class="theme-admonition theme-admonition-note admonition_xJq3 alert alert--secondary"><div class="admonitionHeading_Gvgb"><span class="admonitionIcon_Rf37"><svg viewBox="0 0 14 16"><path fill-rule="evenodd" d="M6.3 5.69a.942.942 0 0 1-.28-.7c0-.28.09-.52.28-.7.19-.18.42-.28.7-.28.28 0 .52.09.7.28.18.19.28.42.28.7 0 .28-.09.52-.28.7a1 1 0 0 1-.7.3c-.28 0-.52-.11-.7-.3zM8 7.99c-.02-.25-.11-.48-.31-.69-.2-.19-.42-.3-.69-.31H6c-.27.02-.48.13-.69.31-.2.2-.3.44-.31.69h1v3c.02.27.11.5.31.69.2.2.42.31.69.31h1c.27 0 .48-.11.69-.31.2-.19.3-.42.31-.69H8V7.98v.01zM7 2.3c-3.14 0-5.7 2.54-5.7 5.68 0 3.14 2.56 5.7 5.7 5.7s5.7-2.55 5.7-5.7c0-3.15-2.56-5.69-5.7-5.69v.01zM7 .98c3.86 0 7 3.14 7 7s-3.14 7-7 7-7-3.12-7-7 3.14-7 7-7z"></path></svg></span>note</div><div class="admonitionContent_BuS1"><p>If you are using a monorepo tool (Lerna, Nx, etc.), skip this section.</p></div></div> 92<p>Before you can successfully build a local version of your React component library, you will need to link the Stencil package to the React package.</p> 93<p>From your Stencil project's directory, run the following command:</p> 94<div class="tabs-container tabList__CuJ"><ul role="tablist" aria-orientation="horizontal" class="tabs"><li role="tab" tabindex="0" aria-selected="true" class="tabs__item tabItem_LNqP tabs__item--active">npm</li><li role="tab" tabindex="-1" aria-selected="false" class="tabs__item tabItem_LNqP">Yarn</li><li role="tab" tabindex="-1" aria-selected="false" class="tabs__item tabItem_LNqP">pnpm</li></ul><div class="margin-top--md"><div role="tabpanel" class="tabItem_Ymn6"><div class="language-bash codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-bash codeBlock_bY9V thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#393A34"><span class="token comment" style="color:#999988;font-style:italic"># Link the working directory</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token function" style="color:#d73a49">npm</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">link</span><br></span></code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_eSgA" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div></div><div role="tabpanel" class="tabItem_Ymn6" hidden=""><div class="language-bash codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-bash codeBlock_bY9V thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#393A34"><span class="token comment" style="color:#999988;font-style:italic"># Link the working directory</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token function" style="color:#d73a49">yarn</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">link</span><br></span></code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_eSgA" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N">
94<path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div></div><div role="tabpanel" class="tabItem_Ymn6" hidden=""><div class="language-bash codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-bash codeBlock_bY9V thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#393A34"><span class="token comment" style="color:#999988;font-style:italic"># Link the working directory</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token function" style="color:#d73a49">pnpm</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">link</span><br></span></code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_eSgA" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div></div></div></div> 95<p>From your React component library's directory, run the following command:</p> 96<div class="tabs-container tabList__CuJ"><ul role="tablist" aria-orientation="horizontal" class="tabs"><li role="tab" tabindex="0" aria-selected="true" class="tabs__item tabItem_LNqP tabs__item--active">npm</li><li role="tab" tabindex="-1" aria-selected="false" class="tabs__item tabItem_LNqP">Yarn</li><li role="tab" tabindex="-1" aria-selected="false" class="tabs__item tabItem_LNqP">pnpm</li></ul><div class="margin-top--md"><div role="tabpanel" class="tabItem_Ymn6"><div class="language-bash codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-bash codeBlock_bY9V thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#393A34"><span class="token comment" style="color:#999988;font-style:italic"># Link the package name</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token function" style="color:#d73a49">npm</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">link</span><span class="token plain"> name-of-your-stencil-package</span><br></span></code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_eSgA" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div></div><div role="tabpanel" class="tabItem_Ymn6" hidden=""><div class="language-bash codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-bash codeBlock_bY9V thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#393A34"><span class="token comment" style="color:#999988;font-style:italic"># Link the package name</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token function" style="color:#d73a49">yarn</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">link</span><span class="token plain"> name-of-your-stencil-package</span><br></span></code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_eSgA" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N">
96<path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div></div><div role="tabpanel" class="tabItem_Ymn6" hidden=""><div class="language-bash codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-bash codeBlock_bY9V thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#393A34"><span class="token comment" style="color:#999988;font-style:italic"># Link the package name</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token function" style="color:#d73a49">pnpm</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">link</span><span class="token plain"> name-of-your-stencil-package</span><br></span></code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_eSgA" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div></div></div></div> 97<p>The name of your Stencil package should match the <code>name</code> property from the Stencil component library's <code>package.json</code>.</p> 98<p>Your component libraries are now linked together. You can make changes in the Stencil component library and run <code>npm run build</code> to propagate the 99changes to the React component library.</p> 100<div class="theme-admonition theme-admonition-tip admonition_xJq3 alert alert--success"><div class="admonitionHeading_Gvgb"><span class="admonitionIcon_Rf37"><svg viewBox="0 0 12 16"><path fill-rule="evenodd" d="M6.5 0C3.48 0 1 2.19 1 5c0 .92.55 2.25 1 3 1.34 2.25 1.78 2.78 2 4v1h5v-1c.22-1.22.66-1.75 2-4 .45-.75 1-2.08 1-3 0-2.81-2.48-5-5.5-5zm3.64 7.48c-.25.44-.47.8-.67 1.11-.86 1.41-1.25 2.06-1.45 3.23-.02.05-.02.11-.02.17H5c0-.06 0-.13-.02-.17-.2-1.17-.59-1.83-1.45-3.23-.2-.31-.42-.67-.67-1.11C2.44 6.78 2 5.65 2 5c0-2.2 2.02-4 4.5-4 1.22 0 2.36.42 3.22 1.19C10.55 2.94 11 3.94 11 5c0 .66-.44 1.78-.86 2.48zM4 14h5c-.23 1.14-1.3 2-2.5 2s-2.27-.86-2.5-2z"></path></svg></span>tip</div><div class="admonitionContent_BuS1"><p>As an alternative to <code>npm link</code> , you can also run <code>npm install</code> with a relative path to your Stencil component library. This strategy, however, will 101modify your <code>package.json</code> so it is important to make sure you do not commit those changes.</p></div></div> 102<h2 class="anchor anchorWithStickyNavbar_LWe7" id="consumer-usage">Consumer Usage<a href="#consumer-usage" class="hash-link" aria-label="Direct link to Consumer Usage" title="Direct link to Consumer Usage">â</a></h2> 103<h3 class="anchor anchorWithStickyNavbar_LWe7" id="creating-a-consumer-react-app">Creating a Consumer React App<a href="#creating-a-consumer-react-app" class="hash-link" aria-label="Direct link to Creating a Consumer React App" title="Direct link to Creating a Consumer React App">â</a></h3> 104<div class="theme-admonition theme-admonition-note admonition_xJq3 alert alert--secondary"><div class="admonitionHeading_Gvgb"><span class="admonitionIcon_Rf37"><svg viewBox="0 0 14 16"><path fill-rule="evenodd" d="M6.3 5.69a.942.942 0 0 1-.28-.7c0-.28.09-.52.28-.7.19-.18.42-.28.7-.28.28 0 .52.09.7.28.18.19.28.42.28.7 0 .28-.09.52-.28.7a1 1 0 0 1-.7.3c-.28 0-.52-.11-.7-.3zM8 7.99c-.02-.25-.11-.48-.31-.69-.2-.19-.42-.3-.69-.31H6c-.27.02-.48.13-.69.31-.2.2-.3.44-.31.69h1v3c.02.27.11.5.31.69.2.2.42.31.69.31h1c.27 0 .48-.11.69-.31.2-.19.3-.42.31-.
10469H8V7.98v.01zM7 2.3c-3.14 0-5.7 2.54-5.7 5.68 0 3.14 2.56 5.7 5.7 5.7s5.7-2.55 5.7-5.7c0-3.15-2.56-5.69-5.7-5.69v.01zM7 .98c3.86 0 7 3.14 7 7s-3.14 7-7 7-7-3.12-7-7 3.14-7 7-7z"></path></svg></span>note</div><div class="admonitionContent_BuS1"><p>If you already have a React app, skip this section.</p></div></div> 105<p>From the <code>packages/</code> directory, run the following commands to create a starter React app:</p> 106<div class="language-bash codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-bash codeBlock_bY9V thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#393A34"><span class="token comment" style="color:#999988;font-style:italic"># Create the React app</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token function" style="color:#d73a49">npm</span><span class="token plain"> create vite@latest my-app -- </span><span class="token parameter variable" style="color:#36acaa">--template</span><span class="token plain"> react-ts</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token comment" style="color:#999988;font-style:italic"># of if using yarn</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token function" style="color:#d73a49">yarn</span><span class="token plain"> create vite my-app </span><span class="token parameter variable" style="color:#36acaa">--template</span><span class="token plain"> react-ts</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token builtin class-name">cd</span><span class="token plain"> ./my-app</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token comment" style="color:#999988;font-style:italic"># install dependencies</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token function" style="color:#d73a49">npm</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">install</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token comment" style="color:#999988;font-style:italic"># or if using yarn</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token function" style="color:#d73a49">yarn</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">install</span><br></span></code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_eSgA" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div> 107<p>You'll also need to link your React component library as a dependency. This step makes it so your React app will be able to correctly resolve imports from your React library. This 108is easily done by modifying your React app's <code>package.json</code> to include the following:</p> 109<div class="language-json codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-json codeBlock_bY9V thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#393A34"><span class="token property" style="color:#36acaa">"dependencies"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">
109{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token property" style="color:#36acaa">"react-library"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"*"</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><br></span></code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_eSgA" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div> 110<h3 class="anchor anchorWithStickyNavbar_LWe7" id="consuming-the-react-wrapper-components">Consuming the React Wrapper Components<a href="#consuming-the-react-wrapper-components" class="hash-link" aria-label="Direct link to Consuming the React Wrapper Components" title="Direct link to Consuming the React Wrapper Components">â</a></h3> 111<p>This section covers how developers consuming your React component wrappers will use your package and component wrappers.</p> 112<p>Before you can consume your React component wrappers, you'll need to build your React component library. From <code>packages/react-library</code> run:</p> 113<div class="tabs-container tabList__CuJ"><ul role="tablist" aria-orientation="horizontal" class="tabs"><li role="tab" tabindex="0" aria-selected="true" class="tabs__item tabItem_LNqP tabs__item--active">npm</li><li role="tab" tabindex="-1" aria-selected="false" class="tabs__item tabItem_LNqP">Yarn</li><li role="tab" tabindex="-1" aria-selected="false" class="tabs__item tabItem_LNqP">pnpm</li></ul><div class="margin-top--md"><div role="tabpanel" class="tabItem_Ymn6"><div class="language-bash codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-bash codeBlock_bY9V thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#393A34"><span class="token function" style="color:#d73a49">npm</span><span class="token plain"> run build</span><br></span></code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_eSgA" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div></div><div role="tabpanel" class="tabItem_Ymn6" hidden=""><div class="language-bash codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-bash codeBlock_bY9V thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#393A34"><span class="token function" style="color:#d73a49">yarn</span><span class="token plain"> build</span><br></span></code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_eSgA" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N">
113<path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div></div><div role="tabpanel" class="tabItem_Ymn6" hidden=""><div class="language-bash codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-bash codeBlock_bY9V thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#393A34"><span class="token function" style="color:#d73a49">pnpm</span><span class="token plain"> run build</span><br></span></code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_eSgA" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div></div></div></div> 114<p>To make use of your React component library in your React application, import your components from your React component library in the file where you want to use them.</p> 115<div class="language-tsx codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockTitle_Ktv7">App.tsx</div><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-tsx codeBlock_bY9V thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#393A34"><span class="token keyword" style="color:#00009f">import</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">'./App.css'</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">import</span><span class="token plain"> </span><span class="token imports punctuation" style="color:#393A34">{</span><span class="token imports"> </span><span class="token imports maybe-class-name">MyComponent</span><span class="token imports"> </span><span class="token imports punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">from</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">'react-library'</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">function</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">App</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token keyword" style="color:#00009f">return</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token tag punctuation" style="color:#393A34"><</span><span class="token tag" style="color:#00009f">div</span><span class="token tag" style="color:#00009f"> </span><span class="token tag attr-name" style="color:#00a4db">className</span><span class="token tag attr-value punctuation attr-equals" style="color:#393A34">=</span><span class="token tag attr-value punctuation" style="color:#393A34">"</span><span class="token tag attr-value" style="color:#e3116c">App</span><span class="token tag attr-value punctuation" style="color:#393A34">"</span><span class="token tag punctuation" style="color:#393A34">></span><span class="token plain-text"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain-text"> </span><span class="token tag punctuation" style="color:#393A34"><</span><span class="token tag class-name" style="color:#00009f">MyComponent</span><span class="token tag" style="color:#00009f"> </span><span class="token tag attr-name" style="color:#00a4db">first</span><span class="token tag attr-value punctuation attr-equals" style="color:#393A34">=</span><span class="token tag attr-value punctuation" style="color:#393A34">"</span><span class="token tag attr-value" style="color:#e3116c">
115Your</span><span class="token tag attr-value punctuation" style="color:#393A34">"</span><span class="token tag" style="color:#00009f"> </span><span class="token tag attr-name" style="color:#00a4db">last</span><span class="token tag attr-value punctuation attr-equals" style="color:#393A34">=</span><span class="token tag attr-value punctuation" style="color:#393A34">"</span><span class="token tag attr-value" style="color:#e3116c">Name</span><span class="token tag attr-value punctuation" style="color:#393A34">"</span><span class="token tag" style="color:#00009f"> </span><span class="token tag punctuation" style="color:#393A34">/></span><span class="token plain-text"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain-text"> </span><span class="token tag punctuation" style="color:#393A34"></</span><span class="token tag" style="color:#00009f">div</span><span class="token tag punctuation" style="color:#393A34">></span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">export</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">default</span><span class="token plain"> </span><span class="token maybe-class-name">App</span><span class="token punctuation" style="color:#393A34">;</span><br></span></code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_eSgA" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div> 116<h2 class="anchor anchorWithStickyNavbar_LWe7" id="api">API<a href="#api" class="hash-link" aria-label="Direct link to API" title="Direct link to API">â</a></h2> 117<h3 class="anchor anchorWithStickyNavbar_LWe7" id="outdir">outDir<a href="#outdir" class="hash-link" aria-label="Direct link to outDir" title="Direct link to outDir">â</a></h3> 118<p><strong>Required</strong></p> 119<p><strong>Type: <code>string</code></strong></p> 120<p>The directory where the React components will be generated. Accepts a relative path from the Stencil project's root directory.</p> 121<h3 class="anchor anchorWithStickyNavbar_LWe7" id="excludecomponents">excludeComponents<a href="#excludecomponents" class="hash-link" aria-label="Direct link to excludeComponents" title="Direct link to excludeComponents">â</a></h3> 122<p><strong>Optional</strong></p> 123<p><strong>Type: <code>string[]</code></strong></p> 124<p>An array of component tag names to exclude from the React output target. Useful if you want to prevent certain web components from being in the React library.</p> 125<h3 class="anchor anchorWithStickyNavbar_LWe7" id="stencilpackagename">stencilPackageName<a href="#stencilpackagename" class="hash-link" aria-label="Direct link to stencilPackageName" title="Direct link to stencilPackageName">â</a></h3> 126<p><strong>Optional</strong></p> 127<p><strong>Type: <code>string</code></strong></p> 128<p>The name of the package that exports the Stencil components. Defaults to the <code>package.json</code> detected by the Stencil compiler.</p> 129<h3 class="anchor anchorWithStickyNavbar_LWe7" id="customelementsdir">
129customElementsDir<a href="#customelementsdir" class="hash-link" aria-label="Direct link to customElementsDir" title="Direct link to customElementsDir">â</a></h3> 130<p><strong>Optional</strong></p> 131<p><strong>Type: <code>string</code></strong></p> 132<p>The directory where the custom elements are saved.</p> 133<p>This value is automatically detected from the Stencil configuration file for the dist-custom-elements output target. If you are working in an environment that uses absolute paths, consider setting this value manually.</p> 134<h3 class="anchor anchorWithStickyNavbar_LWe7" id="hydratemodule">hydrateModule<a href="#hydratemodule" class="hash-link" aria-label="Direct link to hydrateModule" title="Direct link to hydrateModule">â</a></h3> 135<p><strong>Optional</strong></p> 136<p><strong>Type: <code>string</code></strong></p> 137<p>Enable React server side rendering (short SSR) for e.g. <a href="https://nextjs.org/" target="_blank" rel="noopener noreferrer">Next.js</a> applications by providing an import path to the <a href="/docs/hydrate-app">hydrate module</a> of your Stencil project that is generated through the <code>dist-hydrate-script</code> output target, e.g.:</p> 138<div class="language-ts codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockTitle_Ktv7">stencil.config.ts</div><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-ts codeBlock_bY9V thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#393A34"><span class="token keyword module" style="color:#00009f">import</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">type</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> </span><span class="token maybe-class-name">Config</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token keyword module" style="color:#00009f">from</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">'@stencil/core'</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token doc-comment comment" style="color:#999988;font-style:italic">/**</span><br></span><span class="token-line" style="color:#393A34"><span class="token doc-comment comment" style="color:#999988;font-style:italic"> * excerpt from the Stencil example project:</span><br></span><span class="token-line" style="color:#393A34"><span class="token doc-comment comment" style="color:#999988;font-style:italic"> * https://github.com/ionic-team/stencil-ds-output-targets/tree/cb/nextjs/packages/example-project</span><br></span><span class="token-line" style="color:#393A34"><span class="token doc-comment comment" style="color:#999988;font-style:italic"> */</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword module" style="color:#00009f">export</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> config</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token maybe-class-name">Config</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> namespace</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">'component-library'</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> outputTargets</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">[</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token function" style="color:#d73a49">reactOutputTarget</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">
138{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> outDir</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">'../next-app/src/app'</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> hydrateModule</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">'component-library/hydrate'</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> type</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">'dist-hydrate-script'</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> dir</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">'./hydrate'</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token comment" style="color:#999988;font-style:italic">// ...</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">]</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">;</span><br></span></code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_eSgA" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div> 139<h3 class="anchor anchorWithStickyNavbar_LWe7" id="excludeserversiderenderingfor">excludeServerSideRenderingFor<a href="#excludeserversiderenderingfor" class="hash-link" aria-label="Direct link to excludeServerSideRenderingFor" title="Direct link to excludeServerSideRenderingFor">â</a></h3> 140<p><strong>Optional</strong></p> 141<p><strong>Type: <code>string[]</code></strong></p> 142<p>Allows users to exclude a list of components from server side rendering by Next.js or other React 143frameworks. This may be useful if you would like to generally ignore some components from being 144rendered on the server or if you like roll out SSR support for your design system one component at
145a time.</p> 146<h3 class="anchor anchorWithStickyNavbar_LWe7" id="esmodules">esModules<a href="#esmodules" class="hash-link" aria-label="Direct link to esModules" title="Direct link to esModules">â</a></h3> 147<p><strong>Optional</strong></p> 148<p><strong>Default: <code>true</code></strong></p> 149<p><strong>Type: <code>boolean</code></strong></p> 150<p>If <code>true</code>, the output target will generate a separate ES module for each React component wrapper. Defaults to <code>false</code>.</p> 151<h3 class="anchor anchorWithStickyNavbar_LWe7" id="serializeshadowroot">serializeShadowRoot<a href="#serializeshadowroot" class="hash-link" aria-label="Direct link to serializeShadowRoot" title="Direct link to serializeShadowRoot">â</a></h3> 152<p><strong>Optional</strong></p> 153<p><strong>Default: <code>'declarative-shadow-dom'</code></strong></p> 154<p><strong>Type: <code>'declarative-shadow-dom' | 'scoped' | { 'declarative-shadow-dom'?: string[]; scoped?: string[]; } | boolean</code></strong></p> 155<p>Configure how Stencil serializes the components shadow root.</p> 156<ul> 157<li>If set to <code>declarative-shadow-dom</code> the component will be rendered within a Declarative Shadow DOM.</li> 158<li>If set to <code>scoped</code> Stencil will render the contents of the shadow root as a <code>scoped: true</code> component 159and the shadow DOM will be created during client-side hydration.</li> 160<li>Alternatively you can mix and match the two by providing an object with <code>declarative-shadow-dom</code> and <code>scoped</code> keys, 161the value arrays containing the tag names of the components that should be rendered in that mode.</li> 162</ul> 163<p><strong>Examples:</strong></p> 164<ul> 165<li><code>{ 'declarative-shadow-dom': ['my-component-1', 'another-component'], default: 'scoped' }</code> 166Render all components as <code>scoped</code> apart from <code>my-component-1</code> and <code>another-component</code></li> 167<li><code>{ 'scoped': ['an-option-component'], default: 'declarative-shadow-dom' }</code> 168Render all components within <code>declarative-shadow-dom</code> apart from <code>an-option-component</code></li> 169<li><code>'scoped'</code> Render all components as <code>scoped</code></li> 170<li><code>false</code> disables shadow root serialization</li> 171</ul> 172<p><em>NOTE</em> <code>true</code> has been deprecated in favor of <code>declarative-shadow-dom</code> and <code>scoped</code></p> 173<h2 class="anchor anchorWithStickyNavbar_LWe7" id="faqs">FAQ's<a href="#faqs" class="hash-link" aria-label="Direct link to FAQ's" title="Direct link to FAQ's">â</a></h2> 174<h3 class="anchor anchorWithStickyNavbar_LWe7" id="what-is-the-best-format-to-write-event-names">What is the best format to write event names?<a href="#what-is-the-best-format-to-write-event-names" class="hash-link" aria-label="Direct link to What is the best format to write event names?" title="Direct link to What is the best format to write event names?">â</a></h3> 175<p>Event names shouldnât include special characters when initially written in Stencil. Try to lean on using camelCased event names for interoperability between frameworks.</p> 176<h3 class="anchor anchorWithStickyNavbar_LWe7" id="can-i-use-dist-output-target-with-the-react-output-target">Can I use <code>dist</code> output target with the React output target?<a href="#can-i-use-dist-output-target-with-the-react-output-target" class="hash-link" aria-label="Direct link to can-i-use-dist-output-target-with-the-react-output-target" title="Direct link to can-i-use-dist-output-target-with-the-react-output-target">â</a></h3> 177<p>No, the React output target requires the <code>dist-custom-elements</code> output target to be present in the Stencil project's configuration. The <code>dist-custom-elements</code> output target generates a separate entry for each component which best aligns with the expectations of React developers.</p></div><footer class="theme-doc-footer docusaurus-mt-lg"><div class="row margin-top--sm theme-doc-footer-edit-meta-row"><div class="col"><a href="https://github.com/ionic-team/stencil-site/tree/main/versioned_docs/version-v4.43/framework-integration/react.md" target="_blank" rel="noopener noreferrer" class="theme-edit-this-page"><svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg" class="iconEdit_pz9u" aria-hidden="true"><path d="M7 0C3.13438 0 0 3.21563 0 7.17813C0 10.35 2.00625 13.0375 4.7875 13.9875C4.83125 13.9969 4.86875 14 4.90625 14C5.16563 14 5.26562 13.8094 5.26562 13.6438C5.26562 13.4719 5.25938 13.0219 5.25625 12.4219C4.99375 12.4812 4.75938 12.5063 4.55 12.5063C3.20313 12.5063 2.89687 11.4594 2.89687 11.4594C2.57812 10.6313 2.11875 10.4094 2.11875 10.4094C1.50938 9.98125 2.11562 9.96875 2.1625 9.96875H2.16563C2.86875 10.0312 3.2375 10.7125 3.2375 10.7125C3.5875 11.325 4.05625 11.4969 4.475 11.4969C4.80312 11.4969 5.1 11.3906 5.275 11.3094C5.3375 10.8469 5.51875 10.5312 5.71875 10.35C4.16563 10.1688 2.53125 9.55313 2.53125 6.80312C2.53125 6.01875 2.80312 5.37813 3.25 4.87813C3.17812 4.69688 2.9375 3.96563 3.31875 2.97813C3.31875 2.97813 3.36875 2.9625 3.475 2.9625C3.72812 2.9625 4.3 3.05937 5.24375 3.71562C5.80312 3.55625 6.4 3.47812 6.99687 3.475C7.59062 3.47812 8.19063 3.55625 8.75 3.71562C9.69375 3.05937 10.2656 2.9625 10.5188 2.9625C10.625 2.9625 10.675 2.97813 10.675 2.97813C11.0563 3.96563 10.8156 4.69688 10.7437 4.87813C11.1906 5.38125 11.4625 6.02187 11.4625 6.80312C11.4625 9.55937 9.825 10.1656 8.26562 10.3438C8.51562 10.5656 8.74063 11.0031 8.74063 11.6719C8.74063 12.6313 8.73125 13.4062 8.73125 13.6406C8.73125 13.8094 8.82812 14 9.0875 14C9.125 14 9.16875 13.9969 9.2125 13.9875C11.9969 13.0375 14 10.3469 14 7.17813C14 3.21563 10.8656 0 7 0Z" fill="currentColor"></path></svg>Edit this page</a></div><div class="col lastUpdated_JAkA"></div></div></footer></article><nav class="pagination-nav docusaurus-mt-lg" aria-label="Docs pages"><a class="pagination-nav__link pagination-nav__link--prev" href="/docs/javascript"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">JavaScript</div></a><a class="pagination-nav__link pagination-nav__link--next" href="/docs/vue"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Vue</div></a></nav></div></div><div class="col col--3"><div class="toc-wrapper"><h2>Contents</h2><div class="tableOfContents_bqdL thin-scrollbar theme-doc-toc-desktop"><ul class="table-of-contents table-of-contents__left-border"><li><a href="#setup" class="table-of-contents__link toc-highlight">Setup</a><ul><li><a href="#project-structure" class="table-of-contents__link toc-highlight">Project Structure</a></li><li><a href="#adding-the-react-output-target" class="table-of-contents__link toc-highlight">Adding the React Output Target</a></li><li><a href="#add-the-components-to-your-react-component-librarys-entry-file" class="table-of-contents__link toc-highlight">Add the Components to your React Component Library's Entry File</a></li><li><a href="#link-your-packages-optional" class="table-of-contents__link toc-highlight">Link Your Packages (Optional)</a></li></ul></li><li><a href="#consumer-usage" class="table-of-contents__link toc-highlight">Consumer Usage</a><ul><li><a href="#creating-a-consumer-react-app" class="table-of-contents__link toc-highlight">Creating a Consumer React App</a></li><li><a href="#consuming-the-react-wrapper-components" class="table-of-contents__link toc-highlight">Consuming the React Wrapper Components</a></li></ul></li><li><a href="#api" class="table-of-contents__link toc-highlight">API</a><ul><li><a href="#outdir" class="table-of-contents__link toc-highlight">outDir</a></li><li><a href="#excludecomponents" class="table-of-contents__link toc-highlight">excludeComponents</a></li><li><a href="#stencilpackagename" class="table-of-contents__link toc-highlight">stencilPackageName</a></li><li><a href="#customelementsdir" class="table-of-contents__link toc-highlight">customElementsDir</a></li><li><a href="#hydratemodule" class="table-of-contents__link toc-highlight">hydrateModule</a></li><li>
177<a href="#excludeserversiderenderingfor" class="table-of-contents__link toc-highlight">excludeServerSideRenderingFor</a></li><li><a href="#esmodules" class="table-of-contents__link toc-highlight">esModules</a></li><li><a href="#serializeshadowroot" class="table-of-contents__link toc-highlight">serializeShadowRoot</a></li></ul></li><li><a href="#faqs" class="table-of-contents__link toc-highlight">FAQ's</a><ul><li><a href="#what-is-the-best-format-to-write-event-names" class="table-of-contents__link toc-highlight">What is the best format to write event names?</a></li><li><a href="#can-i-use-dist-output-target-with-the-react-output-target" class="table-of-contents__link toc-highlight">Can I use <code>dist</code> output target with the React output target?</a></li></ul></li></ul></div><hr><a href="https://github.com/ionic-team/stencil-site/tree/main/versioned_docs/version-v4.43/framework-integration/react.md" target="_blank" rel="noopener noreferrer" class="theme-edit-this-page"><svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg" class="iconEdit_pz9u" aria-hidden="true"><path d="M7 0C3.13438 0 0 3.21563 0 7.17813C0 10.35 2.00625 13.0375 4.7875 13.9875C4.83125 13.9969 4.86875 14 4.90625 14C5.16563 14 5.26562 13.8094 5.26562 13.6438C5.26562 13.4719 5.25938 13.0219 5.25625 12.4219C4.99375 12.4812 4.75938 12.5063 4.55 12.5063C3.20313 12.5063 2.89687 11.4594 2.89687 11.4594C2.57812 10.6313 2.11875 10.4094 2.11875 10.4094C1.50938 9.98125 2.11562 9.96875 2.1625 9.96875H2.16563C2.86875 10.0312 3.2375 10.7125 3.2375 10.7125C3.5875 11.325 4.05625 11.4969 4.475 11.4969C4.80312 11.4969 5.1 11.3906 5.275 11.3094C5.3375 10.8469 5.51875 10.5312 5.71875 10.35C4.16563 10.1688 2.53125 9.55313 2.53125 6.80312C2.53125 6.01875 2.80312 5.37813 3.25 4.87813C3.17812 4.69688 2.9375 3.96563 3.31875 2.97813C3.31875 2.97813 3.36875 2.9625 3.475 2.9625C3.72812 2.9625 4.3 3.05937 5.24375 3.71562C5.80312 3.55625 6.4 3.47812 6.99687 3.475C7.59062 3.47812 8.19063 3.55625 8.75 3.71562C9.69375 3.05937 10.2656 2.9625 10.5188 2.9625C10.625 2.9625 10.675 2.97813 10.675 2.97813C11.0563 3.96563 10.8156 4.69688 10.7437 4.87813C11.1906 5.38125 11.4625 6.02187 11.4625 6.80312C11.4625 9.55937 9.825 10.1656 8.26562 10.3438C8.51562 10.5656 8.74063 11.0031 8.74063 11.6719C8.74063 12.6313 8.73125 13.4062 8.73125 13.6406C8.73125 13.8094 8.82812 14 9.0875 14C9.125 14 9.16875 13.9969 9.2125 13.9875C11.9969 13.0375 14 10.3469 14 7.17813C14 3.21563 10.8656 0 7 0Z" fill="currentColor"></path></svg>Edit this page</a></div></div></div></div></main></div></div></div></div>
178<script type="module" src="https://static.cloudflareinsights.com/beacon.min.js/v31edd6df95cf4e85bb4c19e7a9bdbcba1788362987495" integrity="sha512-iIg7k2xntmwu6/uSb5tpc/hySgZc4eoL31yB29W6tJFo2akwjPWcEqnCEdJvGexCL0KEQwVYv5BlowfhVz26hg==" data-cf-beacon='{"version":"2024.11.0","token":"368a0b5065b14d6483df2e790f3681cd","r":1,"spa":2}' crossorigin="anonymous"></script>
178 179</body> 180</html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.