Publishing and Integrating a StencilJS Web Component in React

Photo by Sai Kiran Anagani on Unsplash

Reusable web components bring sunshine to front-end developer’s day. And how so you might ask? These web components can be easily customized by assigning values to certain Props and can be utilized in your front-end projects as html tags.

This means you don’t need to recreate components in every project and way cooler still is that you can use these components regardless of the front-end library of framework you are using be it React, Angular, or Vue.

This article is the second part of the previously published article Creating a Reusable Web Component with StencilJS which worked as a guide to creating a reusable accordion component using StencilJS from start to finish.

This time, we’ll be looking into how to build the same component for production, how to publish it on npm, and then reuse this component in a React app created through create-react-app.

Building the component

If you went through the first part of the article, you would have a functioning reusable web component made with StencilJS. You would be able to use the html tag and provide values for color, width, label, and description making it easily customizable. The repo for this component is available here.

With the Typescript, CSS, and HTML files of the accordion component ready, now you can build the component for production by running this in the root folder of your terminal:

npm run build

Publishing in npm

You can then prepare to publish the component npm by editing the package.json file with the name you’d like to use for the published package. You also have the option to provide the link to the repository and your name as the author of the package.

This will be visible at https://npmjs.com/package/package-name, replacing package-name with the name of your package. In this case, I’ve named my accordion component as accordion-stencil-component.

{
  "name": "accordion-stencil-component",
  "version": "1.0.0",
  "repository": {
    "type": "git",
    "url": "https://github.com/allynkalda/Accordion-Component-Using-StencilJS.git"
  },
}

After the build is finished, you can run this at the root folder of your terminal:

npm publish

Integrating component in React app

To test the integration of this published web component in a React app, you can create a sample React app by running the following command in your terminal:

npx create-react-app name-of-app

This will create a new React app where will insert an html tag of our component in the App.js file. Here we will be able to customize and use the StencilJS component. Make sure to run npm install to download all of the dependencies.

All we need to do to complete the integration is to install the npm package we’ve just published as a dependency by running the following in the terminal of the React app we’ve just created:

npm install accordion-stencil-component --save

We will then need to include the component library by calling defineCustomElements(window) from the index.js file as noted in the Stencil documentation for React Integration. We can do this by pasting this into our index.js file:

We can then import our component into our App.js file and use the html tag in our code:

Et voila! You can see the how you can easily customize a Stencil-built web component and reuse it in a React app. Feel free to look at the repo of the React app with the Stencil component here and you can find the first part of this article here.