@manufac/web-components NPM

NPM Downloads

Web Components Available

Candlestick (SVG via D3FC) | <candlestick-svg></candlestick-svg>
Candlestick (Canvas via D3FC) | <candlestick-canvas></candlestick-canvas>
Candlestick (WebGL via D3FC) | <candlestick-webgl></candlestick-webgl>
Contact Us / Query Form | <query-form></query-form>
WorldChorpleth (via Apache ECharts) | <world-choropleth></world-choropleth>

Integrating with vanilla app

Create a vanilla application using vite.

yarn create vite my-app --template vanilla-ts

Install packages.

yarn add @manufac/web-components

Add script to import the @manufac/web-components package. It can be placed inside the head or body tag as per the requirement.

<script type="module">
  import "@manufac/web-components";
</script>

Use the web component where ever required.

<body>
  <inquiry-button serviceID= "" templateID= "" publicID= "" />
</body>

Integrating with ReactJS app

Create a ReactJS app using vite.

yarn create vite my-app --template react-ts

Install packages.

yarn add @manufac/web-components @lit/react

Unlike vanilla apps, for ReactJS apps you have to setup a wrapper function to use a lit component. Checkout reference on how to create a wrapper component.

// LitComponent.ts

import type { EventName } from '@lit/react';
import * as React from "react";
import { createComponent } from '@lit/react';
import { InquiryButton } from '@manufac/web-components';

export const LitComponentWrapper = createComponent({
  tagName: 'inquiry-button',
  elementClass: InquiryButton,
  react: React,
  events: {
    onClick: 'pointerdown' as EventName<PointerEvent>,
    onchange: 'change',
  },
});

Using the component

import { LitComponentWrapper } from './LitComponent'

function App() {
  return (
      <LitComponentWrapper serviceID= "" templateID= "" publicID= "" />
  );
}

export default App;

Adding Styles

font-color for the whole form can be adjusted using:
```
--manufac-form-color: blue;
```
font-family for the whole form can be adjusted using:
```
--manufac-form-font-family: cursive;
```
Label font size for all the Inputs adjusted using:
```
--manufac-form-label-size: 12px;
```
Error font size for the whole form can be adjusted using:
```
--manufac-form-error-size: 14px;
```
Title font size can be adjusted using:
```
--manufac-form-title-size: 18px;
```

Description font size can be adjusted using:

--manufac-form-description-size: 8px;

Usage

  <style>
  query-form {
    --manufac-form-color: blue;
    --manufac-form-font-family: cursive;
    --manufac-form-label-size: 12px;
    --manufac-form-error-size: 14px;
    --manufac-form-title-size: 18px;
    --manufac-form-description-size: 8px;
  }
</style>