reusable-wc v2.0.5

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

Events

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

Events

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 !!!!