sc-green-score

Calm, responsive green score tooltip component for React and Angular applications.

sc-green-score ships in two forms:

• React wrapper: sc-green-score/react
• Custom element for Angular or plain HTML: sc-green-score/element

Install

npm install sc-green-score

For React projects, make sure react and react-dom are already installed.

React

import { GreenScoreTooltip } from "sc-green-score/react";

export function ProductCard() {
  return (
    <GreenScoreTooltip
      apiBaseUrl="https://api.example.com"
      unitId="ECU-1001"
      productName="Inverter Controller"
      regionCode="IN-MH"
      quantity={1}
      quantityUnit="piece"
    />
  );
}

Angular

Register the web component once, for example in main.ts:

import "sc-green-score/element";

Then use it in a template:

<sc-green-score-tooltip
  api-base-url="https://api.example.com"
  unit-id="ECU-1001"
  product-name="Inverter Controller"
  region-code="IN-MH"
  quantity="1"
  quantity-unit="piece"
></sc-green-score-tooltip>

Behavior

• Popups are closed by default.
• The tooltip opens on click.
• The panel automatically flips to the side with more available space.
• The popup styling adjusts softly based on the returned score band.

API Contract

This package assumes an API endpoint like:

GET /api/green-score?unitId=...

Expected response:

{
  "data": {
    "unitId": "ECU-1001",
    "productName": "Inverter Controller",
    "greenScore": 82,
    "band": "good",
    "carbonEmission": 12.4,
    "carbonEmissionUnit": "kg-co2e",
    "totalEmission": 15.8,
    "totalEmissionUnit": "kg-co2e",
    "breakdown": [
      { "key": "transport", "label": "Transport", "value": 2.1, "unit": "kg-co2e" },
      { "key": "material", "label": "Material", "value": 8.4, "unit": "kg-co2e" }
    ],
    "methodology": "ISO-14067 estimated footprint model",
    "updatedAt": "2026-04-09T10:00:00.000Z"
  },
  "meta": {
    "requestId": "req_123",
    "source": "sc-green-score"
  }
}

Props

Supported component props and attributes:

• apiBaseUrl
• unitId
• productName
• regionCode
• quantity
• quantityUnit
• apiKey
• autoOpen

Local Development

npm install
npm run check
npm run build
npm run demo

Local demo URLs:

• http://localhost:4173/react
• http://localhost:4173/angular