Equator Stencil Web Component Library (React + Next.js)

A collection of web components for use on any react-based project. These are created using the stencil.js framework.

Web components are framework agnostic so can be used within any build stack. However, for a React or Nextjs project theses have been given a wrapper so that they can be consumed in the same way as any other react component, including type checking.

If you wish to use these components as regular HTML tags, there is a different package which can be used

Usage

To use in a project, you can install via npm:

npm i eqtr-stencil-library-react

You can then import the components you wish to use:

import { EqtrAccordionGroup, EqtrAccordion } from "eqtr-stencil-library-react";

They can then be used in the same way you would use any other React component:

return (
  <div className="w-full max-w-5xl py-16 mx-auto">
    <EqtrAccordionGroup>
      {accordionData.map((item) => (
        <EqtrAccordion>
          <span
            slot="button-title"
            className="text-lg font-hca font-medium tracking-[-0.03em] leading-[160%] text-[#0C2141]"
          >
            {item.title}
          </span>
          <span slot="inactive-icon">
            <PlusIcon />
          </span>
          <span slot="active-icon">
            <MinusIcon />
          </span>
          <div
            slot="body-content"
            className="font-hca text-base font-[450] tracking-[-0.03em] leading-[150%] text-[#35445C]"
          >
            {item.body}
          </div>
        </EqtrAccordion>
      ))}
    </EqtrAccordionGroup>
  </div>
);