@manufac/web-components
v0.0.13
Published
Manufac Web Components
Downloads
4
Maintainers
Readme
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 thehead
orbody
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 alit
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>