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.
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:
In the my-accordion.scss file, paste the following to format the visual design of the accordion:
In the index.html file paste the following code to see the finished component in the browser:
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:
This will automatically open a browser and show you the accordion component which should look like this:
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.