0.2.6 • Published 10 months ago

hi-contact v0.2.6

Weekly downloads
-
License
-
Repository
-
Last release
10 months ago

HiContact Web Component

hi-contact is a customizable web component. It allows users to display a contact form on their website, with the option to send emails or OTPs (One-Time Passwords). The component supports both dark and light themes and can be styled with rounded corners.

Features

  • Username Prop: Set the username to personalize the form.
  • Button or Form Display: Optionally display the contact form as a button that opens the form on click.
  • Theming: Choose between dark or light themes.
  • Rounded Corners: Optionally apply rounded corners to the form.
  • OTP Mode: Enable or disable OTP functionality.

Installation

You can install the hi-contact component via npm:

npm install hi-contact # yarn add hi-contact 

Or directly import the script in your HTML:

<script type="module" crossorigin src="https://unpkg.com/hi-contact@latest/dist/hiContact.js"></script>

Example

Here’s an example of how to use the component with different settings:

<hi-contact
  username="JaneDoe"
  asButton
  theme="light"
  corners="rounded"
  otp>
  <div>Contact me</div>
</hi-contact>

Attributes

  • username: string - The username to be displayed in the form.
  • asButton: boolean - Displays the form with a slot with hook (button).
  • otp: boolean - Enables OTP mode when set.
  • theme: 'dark' | 'light' - Sets the theme of the form. Default is 'dark'.
  • corners: 'rounded' | '' - Adds rounded corners to the form.

Usage

Basic Usage

To use the hi-contact component, include it in your HTML as follows:

<hi-contact username="JohnDoe"></hi-contact>

Button Mode

If you prefer to display a button that triggers the contact form, set the asButton attribute to true:

<hi-contact username="JohnDoe" asButton>
  <div>Contact me</div>
</hi-contact>

OTP Mode

Enable OTP functionality by setting the otp attribute to true:

<hi-contact username="JohnDoe" otp></hi-contact>

Theming

The component supports dark and light themes. The default theme is dark. To switch to the light theme, use the theme attribute:

<hi-contact username="JohnDoe" theme="light"></hi-contact>

Rounded Corners

To apply rounded corners to the form, use the corners attribute:

<hi-contact username="JohnDoe" corners="rounded"></hi-contact>

Styling

You can further customize the appearance of the component using CSS. For example:

hi-contact {
  --hi-bg-color:  rgba(86, 57, 216, 0.603); 
  --hi-text-color:  rgb(187, 43, 43);
  --hi-border-color:  rgb(243, 244, 246, 0.1);
  --hi-button-color:  rgb(2, 17, 12);
  --hi-button-hover-color:  rgb(24, 181, 129);
  --hi-button-text-color:  rgb(225, 28, 28);
  --hi-button-text-hover:  rgb(76, 9, 9);
  --hi-placeholder-text:  rgb(184, 32, 32);
  --hi-placeholder-color:  rgb(6, 5, 5);
  }
0.2.6

10 months ago

0.2.5

11 months ago

0.2.4

11 months ago

0.2.3

11 months ago

0.2.2

11 months ago

0.2.1

11 months ago

0.2.0

11 months ago

0.1.2

12 months ago

0.1.1

12 months ago

0.1.0

12 months ago