One of the questions I was asked a few days ago was how to consume a Stencil component in React 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.
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, Introduction to Stencil, I showed a collapsible panel component snippet. In this post I’ll use that component in a React app.
Adding The Component Code
I created the React app using create-react-app project template. If you want to generate it as well, use the following command line code:
npm install -g create-react-app
create-react-app stencil-react
The first line will install create-react-app generator globally on your machine and the second will generate the stencil-react app skeleton.
Then, add the collapsible panel component built code as an asset to the project. In the public folder, create an assets folder and then add the stencil component there:
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 index.html which also exists in the public folder, add the component script:
<!DOCTYPE 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>React App</title></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div>
<**script src="assets/stencil/mycomponent.js"**\></**script**\>
</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 App.js code as follows:
import React, { Component } from 'react';import logo from './logo.svg';import './App.css';
class App extends Component {collapseTitle = 'Collapse Me!';
toggle() {
**this**.**refs**.collapsiblePanel.toggle();
}
render() {return (<div className="App"><header className="App-header"><img src={logo} className="App-logo" alt="logo" /><h1 className="App-title">Welcome to React</h1></header><p className="App-intro">To get started, edit <code>src/App.js</code> and save to reload.</p><collapsible-panel ref="collapsiblePanel" title={this.collapseTitle}><ul><li>Components are awesome!</li><li>They drive the web</li></ul></collapsible-panel><button onClick={this.toggle.bind(this)}>Toggle from outside!</button></div>);}}
export default App;
As you can see, I’m using regular React code and binding with the Stencil generated component. Nothing special. In the render function I added the collapsible panel and bind its title to the React component collapsibleTitle member. I also added a ref attribute to enable the toggle function to toggle the panel from the outside.
If you will run the app using npm run start command the output will be:
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