Consuming a Stencil Component in React App

One of the questions I was asked a few days ago was how to consume a Stencil component in apps. Since Stencil is a compiler that generates custom elements, you can consume any Stencil generated component in any framework/library not only in React apps. React On the other hand, I asked myself why not to create an example app to show that and this is why this post was written :) The Stencil Component In my first Stencil post, , I showed a collapsible panel component snippet. In this post I’ll use that component in a React app. Introduction to Stencil Adding The Component Code I created the React app using project template. If you want to generate it as well, use the following command line code: create-react-app npm install -g create-react-app create-react-app stencil-react The first line will install generator globally on your machine and the second will generate the app skeleton. create-react-app stencil-react Then, add the collapsible panel component built code as an asset to the project. In the folder, create an folder and then add the stencil component there: public assets Note: Adding the component code can also be done by importing a node module, adding a script that exists in a CDN and etc. For simplicity I just added the whole component code. In the which also exists in the folder, add the component script: index.html public React App You need to enable JavaScript to run this app. html html lang="en" head meta charset="utf-8" meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" meta name="theme-color" content="#000000" link rel="manifest" href="%PUBLIC_URL%/manifest.json" link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" title title head body noscript noscript div id="root" div body html Consuming the Stencil Component Now that we set all the environment, we can use the Stencil component as we use any other web component. I updated the code as follows: App.js React, { Component } ; logo ; ; import from 'react' import from './logo.svg' import './App.css' App Component { = ; class extends collapseTitle 'Collapse Me!' toggle() { **this**.**refs**.collapsiblePanel.toggle(); } render() { ( Welcome to React To get started, edit src/App.js and save to reload. Components are awesome! They drive the web Toggle from outside! );}} return div className="App" header className="App-header" img src= className="App-logo" alt="logo" h1 className="App-title" h1 header p className="App-intro" code code p collapsible-panel ref="collapsiblePanel" title= this collapseTitle ul li li li li ul collapsible-panel button onClick= this this button div App; export default As you can see, I’m using regular React code and binding with the Stencil generated component. Nothing special. In the function I added the collapsible panel and bind its title to the React component member. I also added a attribute to enable the function to toggle the panel from the outside. render collapsibleTitle ref toggle If you will run the app using command the output will be: npm run start The Running App Summary Consuming Stencil components in React apps is as simple as to add the component script and just use it. Stencil can also be consumed from any other frameworks including Angular, Vue or Polymer and this what makes it super powerful. You can find the app code . here #UseThePlatform