@manufac/web-components
v0.0.39
Published
Manufac Web Components
Downloads
35
Readme
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-componentspackage. It can be placed inside theheadorbodytag 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
ReactJSapps you have to setup a wrapper function to use alitcomponent. 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-colorfor the whole form can be adjusted using:--manufac-form-color: blue;font-familyfor 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>