Reusable Web Component's

This are the Web Components created using stencil.js that can be used in any UI Frameworks or Libraries such as React, Angular and Vue

Web Components:

Web Components is a suite of different technologies allowing you to create reusable custom elements — with their functionality encapsulated away from the rest of your code — and utilize them in your web apps.

Stencil.Js

Stencil is a compiler for building fast web apps using Web Components.

Stencil is also great for building entire apps. For that, use the stencil-app-starter instead.

Getting Started

Install:

npm i reusable-wc

To Make Use of this web component in other Frameworks or library Follow the below Link:

• Framework Integartion with Angular
• Framework Integartion with React
• Framework Integartion with Vue

Components and Its Usage

Properties

| Property | Attribute | Description | Type | Default | | ----------- | ------------ | ----------- | ---------------------- | ---------- | | error | error | | boolean | false | | errorText | error-text | | string | '' | | format | format | | "number" \| "text" | 'number' | | otp | otp | | string | '' | | size | size | | number | 6 | | styleName | style-name | | "lg" \| "md" \| "sm" | 'md' |

Events

| Event | Attribute | Type | | ------------- | --------------- | --------------------- | | otpChange | onOtpChange | CustomEvent<string> | | otpComplete | onOtpComplete | CustomEvent<string> |

Syntax

• Default: <digit-input size="6" format="number" otp="123456" style-name="lg" ></digit-input>

• With Error: <digit-input size="6" format="number" otp="123456" style-name="lg" error=true error-text="invalid Otp"></digit-input>

Event usage in Non Jsx:

<digit-input size="6" format="number" otp="123456" style-name="lg" ></digit-input>

<script>
const ele = document.querySelectorAll('digit-input');
ele.forEach(el=> addEventListener('otpComplete', event => { console.log('FULLFILED COMPLETED', event.detail); }));
ele.forEach(el=> addEventListener('otpChange', event => { console.log('FULLFILED RECEIVED', event.detail); }));
</script>

Event usage in Jsx:

<digit-input size="6" format="number" otp="123456" style-name="lg" onOtpChange={(e) => this.someMethod(e)} onOtpComplete={(e) => this.someMethod(e)} ></digit-input>

Properties

| Property | Attribute | Description | Type | Default | | ------------- | ------------- | ----------- | -------------------- | --------------- | | disabled | disabled | | boolean | false | | error | error | | boolean | false | | errorText | error-text | | string | '' | | helperText | helper-text | | string | '' | | label | label | | string | undefined | | name | name | | string | undefined | | placeholder | placeholder | | string | 'Placeholder' | | type | type | | "number" \| "text" | 'text' | | uid | uid | | string | undefined | | value | value | | string | '' |

Events

| Event | Description | Type | | ------------------ | ----------- | --------------------- | | inputFieldChange | | CustomEvent<string> |

Syntax

• Default: <input-field type="text" label="Full Name" name="fullname" placeholder="Please type name..."></input-field>

• With Error: <input-field type="text" label="Full Name" name="fullname" placeholder="Please type name..." error="true" error-text="Error"></input-field>

• With Helper Text: <input-field type="text" label="Full Name" name="fullname" placeholder="Please type name..." helper-text="HelperText"></input-field>

• With Disabled: <input-field type="text" label="Full Name" name="fullname" placeholder="Please type name..." disabled="true"></input-field>

• With Type number: <input-field type="number" label="Mobile No." name="mobile" placeholder="Please"></input-field>

Event usage in Non Jsx:

<input-field type="text" label="Full Name" name="fullname" placeholder="Please type name..."></input-field>

<script>
 const ele = document.querySelectorAll('input-field');
      ele.forEach(el =>
        addEventListener('inputFieldChange', event => {
          console.log('on change called', event.detail);
        }),
      );
</script>

Event usage in Jsx:

<input-field type="text" label="Full Name" name="fullname" placeholder="Please type name..." onInputFieldChange={e => this.someMethod(e)}></input-field>

Happy Coding !!!!