Mortgage-repayment-calculator NPM

Mortgage repayment calculator

This is a web component widget for developers to embed on their websites if they want to provide users with a new feature to calculate mortgage repayments.

Mockup showcasing widget within website skeleton layout onthe side.

Getting started

This component has one dependency, which is a 45 KB library called Lightweight Charts.

Before using the web component, please ensure you load the Lightweight Charts dependency either through a CDN or as an NPM dependency.

Examples (buildless)

As a script

<head>
  <!-- dependency -->
  <script defer src="https://unpkg.com/lightweight-charts/dist/lightweight-charts.standalone.production.js"></script>
  <!-- component -->
  <script defer src="../index.js" type="module"></script>
</head>
<body>
  <mortgage-repayment-calculator></mortgage-repayment-calculator>
</body>
</html>

As an import within your js module

<head>
  <!-- dependency -->
  <script defer src="https://unpkg.com/lightweight-charts/dist/lightweight-charts.standalone.production.js"></script>
  <!-- your own script module -->
  <script defer src="someModule.js" type="module"></script>
</head>
<body>
  <mortgage-repayment-calculator></mortgage-repayment-calculator>
</body>
</html>

// someModule.js
import "../dist/index.js";

For full examples, see the demo folder.

NPM

<head>
  <!-- dependency -->
  <script defer src="https://unpkg.com/lightweight-charts/dist/lightweight-charts.standalone.production.js"></script>
  <!-- component -->
  <script defer type="module" src="./node_modules/mortgage-repayment-calculator/index.js"></script>
</head>
<body>
  <mortgage-repayment-calculator></mortgage-repayment-calculator>
</body>
</html>

// someModule.js
import "../dist/index.js";

Examples (frameworks, build involved)

This applies if you're using ReactJs, NextJS, etc.

It will widely depend on the framework you use and how it operates but the process should be similar.

Here is a NextJS example:

// the web component was only built to run client-sided
"use client";

import "mortgage-repayment-calculator";

function MyComponent() {
  return (
    <>
      // dependency - must be a script, cannot be npm
      <Script src="https://unpkg.com/lightweight-charts/dist/lightweight-charts.standalone.production.js"/>
      // component
      <mortgage-repayment-calculator/>
    </>
  )
}

export default MyComponent;

Configuration & Styling

You can customise the component to align better with your website style.

<!-- give it an id -->
<mortgage-repayment-calculator id="mrc"></mortgage-repayment-calculator>

<script>
  const mrc = document.getElementById("mrc");
  mrc.style.setProperty("--radius", "2px");
</script>

All properties that you can change

:host {
  --color-accent: "#f16e51";
  --color-outline: "#465ec3";
  --color-onSurface: "#edeff9";
  --color-onSurfaceVariant: "#dadff3";
  --color-text-primary: "#000";
  --color-text-secondary: "#444";
  --color-btn-secondary: "#edeff9";
  --color-text-btn-primary: "#fff";
  --color-text-btn-secondary: "#000";
  --radius: ".5rem";
}

Why is this a web component?

Web components are widely available in the top browsers (i.e. Chrome, Edge, Firefore, and Safari). They allow for code encapsulation and they are not tied to a framework like React or Angular. This means the component will not affect your website and your website will not affect the component. Lastly, you will be able to use this component irrelevant of how your website is built (i.e. framework or not).

You can read more about web components here: https://developer.mozilla.org/en-US/docs/Web/API/Web_components

web component component custom element

1.0.0

1 year ago