Creating a Reusable Web Component with StencilJS

Allyn Alda
Sep 30, 2019 · 3 min read
Photo by Caleb Angel on Unsplash

The superpower of web components is their reusability. StencilJS extends this superpower even further by providing and easy-to-use starter kit for making agnostic web components. This means you can use your Stencil components in other front-end frameworks or libraries like React, Angular, or Vue.

You can simply create the web component and publish it on npm. With that you can then import the published package into your app project and use the html tag in your code.

The aim of this article is precisely to guide you through the process of creating reusable web components by making a basic accordion component with StencilJS and how you can then reuse this in a React app.

The first part of this article guides you through how to create the accordion component with StencilJS. The second part will then show how to publish the finished web component in npm and how to integrate it into your React app project.

Creating your Accordion Component with StencilJS

Start by creating a folder and inside it run this in your terminal:

npm init stencil

Then, pick the component starter kit in the options which will create all of the folders and files necessary for you to create your new component. Make sure to run npm install to download all of the dependencies.

Typescript file

Inside the src folder, create a component called my-accordion and in the my-accordion.tsx file create the structure for an accordion component. You will be able to change the color, width, label, and description of this reusable component by making Props for these characteristics.

The following is the full code in the .tsx file:

my-accordion.tsx

CSS file

In the my-accordion.scss file, paste the following to format the visual design of the accordion:

my-accordion.scss

HTML file

In the index.html file paste the following code to see the finished component in the browser:

index.html

As you can might notice in the accordion’s html tag, you can feed your chosen string values to the Props label, description, width, and color. This will allow you to customize this reusable web component in your application with whatever text, size, and color you prefer.

Once these steps are done, run this in your terminal:

npm start

This will automatically open a browser and show you the accordion component which should look like this:

accordion component made with StencilJS
accordion component made with StencilJS

Hurray! Now that we’ve made the accordion component, wouldn’t be great if we could reuse this in any project where we need this customizable component? We can do just that regardless of the front-end framework or library you are using.

Ready? We can now proceed to part two of this article. In part two, we will find out how to build the component for production, publish it in npm, and then reuse this in a React app. You can check out the repo of this StencilJS component here.

Stencil Tricks

A collection of community-written articles on how to do…

Stencil Tricks

A collection of community-written articles on how to do awesome things in Stencil JS

Allyn Alda

Written by

Front-End Developer based in Barcelona. Making magic with JavaScript.

Stencil Tricks

A collection of community-written articles on how to do awesome things in Stencil JS