One of the questions I was asked a few days ago was how to consume a Stencil component in [React](https://hackernoon.com/tagged/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](https://medium.com/@gilfink/getting-started-with-stencil-7e331962a9f1), 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_](https://hackernoon.com/tagged/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:

![](https://hackernoon.com/hn-images/1*vuKTfiazhCdWt3fq40Ozww.png)

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](https://github.com/gilf/stencil-react).

#UseThePlatform

Super

Too Long; Didn't Read

Cassandra Forward a free Cassandra-focused community event

Consuming a Stencil Component in React App

Too Long; Didn't Read

Companies Mentioned

@gilfink

RELATED STORIES