npm package: @krozamdev/svelte-masked-password
Description: The InputMaskingPassword component is a password input field that includes masking functionality (hiding characters as the user types) and allows toggling to show or hide the password. It uses the @krozamdev/masked-password library to apply the masking an
Latest version: 1.0.1

# @krozamdev/svelte-masked-password

A lightweight, customizable masked password input component for Svelte. This component allows you to securely mask password input fields and provides a customizable approach to controlling password visibility.

The InputMaskingPassword component is a password input field that includes masking functionality (hiding characters as the user types) and allows toggling to show or hide the password. It uses the `@krozamdev/masked-password` library to apply the masking and supports custom mask characters. The component also handles password input changes by passing the raw (unmasked) value via a callback function.

<p align="center">
  <a href="https://www.npmjs.com/package/@krozamdev/svelte-masked-password"><img src="https://img.shields.io/npm/v/@krozamdev/svelte-masked-password" alt="Latest Version"></a>
  <a href="https://www.npmjs.com/package/@krozamdev/svelte-masked-password"><img src="https://img.shields.io/npm/dt/@krozamdev/svelte-masked-password" alt="Total Download"></a>
  <a href="https://www.npmjs.com/package/@krozamdev/svelte-masked-password"><img src="https://img.shields.io/npm/l/@krozamdev/svelte-masked-password" alt="License"></a>
</p>

## Compatible Packages

<ul style="list-style: none; padding: 0; text-align: left;">
  <li>
    <a href="https://github.com/krozamdev/masked-password">
      <img src="https://img.shields.io/badge/vanillaJS-%40krozamdev%2Fmasked--password-F7DF1E?logo=javascript" alt="VanillaJS">
    </a>
  </li>
  <li>
    <a href="https://github.com/krozamdev/react-masked-password">
      <img src="https://img.shields.io/badge/React-%40krozamdev%2Freact--masked--password-61DAFB?logo=react" alt="React">
    </a>
  </li>
  <li>
    <a href="https://github.com/krozamdev/vue-masked-password">
      <img src="https://img.shields.io/badge/Vue-%40krozamdev%2Fvue--masked--password-42b883?logo=vuedotjs" alt="Vue">
    </a>
  </li>
  <li>
    <a href="https://github.com/krozamdev/svelte-masked-password">
      <img src="https://img.shields.io/badge/Svelte-%40krozamdev%2Fsvelte--masked--password-FF3E00?logo=svelte" alt="Svelte">
    </a>
  </li>
</ul>

## Features

- **Masked Input**: Mask the entered password with a configurable mask character.
- **Password Toggle**: Option to show or hide the password input.
- **TypeScript Support**: Written in TypeScript for better type safety.
- **Easy Integration**: Can be easily integrated into any Svelte form.
- **Lightweight**: Minimal JavaScript bundle size for better performance.
- **Cross-browser Compatibility**: Works across modern browsers.

## Installation

To install the package, use either npm or yarn:

- npm
    ```bash
    npm install @krozamdev/svelte-masked-password
    ```
- yarn
    ```bash
    yarn add @krozamdev/svelte-masked-password
    ```
- pnpm
    ```bash
    pnpm add @krozamdev/svelte-masked-password
    ```
- bun
    ```bash
    bun add @krozamdev/svelte-masked-password
    ```

## Usage

Here’s an example of how to use the masked password input component in your Svelte project:

```svelte
<script lang="ts">
  import InputMaskingPassword from '@krozamdev/svelte-masked-password';
  
  let password = "";
  let showPassword = false;

  const handlePasswordChange = (newPassword: string) => {
    password = newPassword;
    console.log("Password changed: ", password);
  };

  const toggleShowPassword = () => {
    showPassword = !showPassword;
  };
</script>

<main>
  <button on:click={toggleShowPassword}>
    {showPassword ? "Hide Password" : "Show Password"}
  </button>

  <InputMaskingPassword
    onChangeEvent={handlePasswordChange}
    maskCharacter="•"
    showPassword={showPassword}
    placeholder="Enter your password"
  />
</main>
```

## Props

| Prop             | Type                                    | Description                                                                                      |
|------------------|-----------------------------------------|--------------------------------------------------------------------------------------------------|
| `onChangeEvent`  | `(originalValue: string)`               | Callback that fires when the password value changes.                                              |
| `maskCharacter`  | `string`                                | (Optional) The character used to mask the password. Defaults to `•`.                             |
| `showPassword`   | `boolean`                               | (Optional) Show or hide the password input. Defaults to `false`.                                  |
| `...props`        | `InputHTMLAttributes<HTMLInputElement>` | All other standard HTML input attributes are supported, such as `placeholder`, `class`, etc. |



## Development

To build the project locally:

1. Clone the repository:
    ```bash
    git clone https://github.com/krozamdev/svelte-masked-password.git
    cd svelte-masked-password
    ```
2. Install dependencies:
    ```bash
    yarn install
    ```
3. Run the build:
    ```bash
    yarn build
    ```
This will create the build output in the dist directory.

## Contributing

1. Fork the repository.
2. Create your feature branch (git checkout -b feature/my-feature).
3. Commit your changes (git commit -am 'Add new feature').
4. Push to the branch (git push origin feature/my-feature).
5. Create a new Pull Request.

## License

This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.

## Contact

For support, please email [support@krozam.tech](mailto:support@krozam.tech).