Reusable Widget POC

A library that converts React components into reusable Web Components.

Features

• Convert React components to Web Components
• Energy Flow visualization as a Web Component
• Styling with SASS
• Animation support using Lottie
• Type safety with TypeScript

Prerequisites

Before using this library, you need to:

1. Get an API Key
2. Obtain the Site ID of the site you manage.

Tech Stack

• React 18
• TypeScript
• Vite
• SASS
• Lottie
• ESLint

NPM

npm install reusable-widget-poc
# or
yarn add reusable-widget-poc
# or
pnpm add reusable-widget-poc

CDN

<script
  type="module"
  src="https://cdn.jsdelivr.net/npm/[email protected]/dist/reusable-widget-poc.es.js"
></script>

Usage

Using in HTML with CDN

<!-- Import the library-->
<script
  type="module"
  src="https://cdn.jsdelivr.net/npm/[email protected]/dist/reusable-widget-poc.es.js"
></script>

<!-- Use the Web Component -->
<energy-flow-widget
  api-key="YOUR_API_KEY"
  site-id="YOUR_SITE_ID"
></energy-flow-widget>

Using in JavaScript/TypeScript Application with NPM

// Import the library
import "reusable-widget-poc/dist/reusable-widget-poc.es.js";

// Use the Web Component
return (
  <energy-flow-widget
    api-key="YOUR_API_KEY"
    site-id="YOUR_SITE_ID"
  ></energy-flow-widget>
);

// src/types.d.ts
import React from "react";

declare module "react" {
  namespace JSX {
    interface IntrinsicElements {
      "energy-flow-widget": React.DetailedHTMLProps<
        React.HTMLAttributes<HTMLElement> & {
          "api-key": string;
          "site-id": string;
        },
        HTMLElement
      >;
    }
  }
}

export {};

** Note: The src/types.d.ts file should be included in the include section of tsconfig.json

Build

pnpm run build:lib

Publishing to npm

1. Update package version

# Modify version field in package.json
# or
npm version patch/minor/major

2. Login to npm

npm login

3. Publish to npm

npm publish