Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Consuming a Stencil Component in React App

DZone's Guide to

Consuming a Stencil Component in React App

In this quick tutorial, we'll learn how to use this nifty little component in our React app, and gives some sample code along the way.

· Web Dev Zone ·
Free Resource

Deploy code to production now. Release to users when ready. Learn how to separate code deployment from user-facing feature releases with LaunchDarkly.

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, 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 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 it with the Stencil generated component. Nothing special. In the render function, I added the collapsible panel and bound 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 run the app using npm run start command the output will be:

Summary

Consuming Stencil components in React apps is as simple as adding the component script and just using 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.

Deploy code to production now. Release to users when ready. Learn how to separate code deployment from user-facing feature releases with LaunchDarkly.

Topics:
web dev ,react ,web application development ,components

Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}