Creating a Reusable Web Component with StencilJS

Allyn Alda
Sep 30, 2019 · 3 min read
Image for post
Image for post
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.

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

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store