Awesome

<h1 align="center">SimpleMaskMoney</h1> <h5 align="center"> ⚠️<b>WARNING</b>⚠️<br> If you are having problems please check the version that you are using. <br> This package follows the <a href="https://semver.org/">semantic versioning</a> try to keep it updated with the <a href="https://github.com/codermarcos/simple-mask-money">latest version</a>. </h5> <p align="center"> <a class="badge-align" href="https://github.com/codermarcos/simple-mask-money/actions/workflows/on_push.yaml"> <img src="https://github.com/codermarcos/simple-mask-money/actions/workflows/on_push.yaml/badge.svg?event=push" alt="build status"/> </a> <a class="badge-align" href="https://badge.fury.io/js/simple-mask-money"> <img src="https://badge.fury.io/js/simple-mask-money.svg" alt="npm version"> </a> <a class="badge-align" href="https://www.npmjs.com/package/simple-mask-money"> <img src="https://img.shields.io/npm/dm/simple-mask-money.svg" alt="npm downloads"> </a> <a class="badge-align" href="https://www.apache.org/licenses/LICENSE-2.0"> <img src="https://img.shields.io/badge/Apache-2.0-blue.svg" alt="License"> </a> </p>

Simple money mask developed with pure JavaScript 🗃️ 0 dependecies, 🍃 Super light just 1.65kB gzipped, 🔒 100% Secure (no npm audit problems or dependabot issues) which you can run on Client Side and Server Side. Try live demo.

🎉 Getting Started

Installation

First install it:

  npm i simple-mask-money --save

Or access the GitHub release directly:

<script src="https://github.com/codermarcos/simple-mask-money/releases/download/<RELEASE_VERSION_HERE>/simple-mask-money.js"></script>

Remember to replace <RELEASE_VERSION_HERE> with the latest version

Implementation

After installed is just implement, for it choose the best example for you.

React JS Basic Example

For use with React JS you can pass only the id:

import { useEffect } from 'react';
import { setMask } from 'simple-mask-money';

function InputMoneyComponent() {
  useEffect(setMask('#my-input'), []);

  return <input id="my-input" />
}

If you prefer you can use a ref:

import { useEffect } from 'react';
import { setMask, useRef } from 'simple-mask-money';

function InputMoneyComponent() {
  const inputRef = useRef(null);

  useEffect(setMask(inputRef.current), []);

  return <input ref={inputRef} />
}

These are only the basic usage if you need configure some arguments you can check documentation about full api reference

Vanilla JS Basic Example

Here is a usage example with Vanilla JS:

  <body>
    <!-- Set inputmode to numeric to show only numbers on mobile -->
    <input id="my-input" />

    <script src="./node_modules/simple-mask-money/lib/simple-mask-money.js"></script>
    
    <script>
      // Select the element
      const removeMask = SimpleMaskMoney.setMask('#my-input');
      // Convert the input value to a number, which you can save e.g. to a database:
      SimpleMaskMoney.formatToNumber(input.value);
    </script>
  </body>

These are only the basic usage if you need configure some arguments you can check documentation about full api reference

Vue JS Basic Example

Here is a usage example with Vue JS:

<template>
  <form>
    <input type="text" id="my-input" />
  </form>
</template>

<script>
import { setMask, formatToNumber } from 'simple-mask-money'; // import mask

export default {
  mounted() {
    SimpleMaskMoney.setMask('#my-input'); // set mask on your input you can passing a querySelector
  },
  beforeUnmount() {
    SimpleMaskMoney.removeMask('#my-input'); // remove mask destroy listeners
  },
}
</script>

These are only the basic usage if you need configure some arguments you can check documentation about full api reference

Angular Basic Example

Here is a usage example with Angular JS:

import { setMask, removeMask, formatToNumber } from 'simple-mask-money'; // import mask
import { Component, OnInit, AfterViewInit } from '@angular/core';

@Component({
  template: '<input id="my-input" />'
})
export class InputMoneyComponent implements AfterViewInit, OnDestroy {

  ngAfterViewInit() {
    setMask('#my-input'); // set mask on your input you can pass a querySelector or your input element and options
  }

  ngOnDestroy() { 
    removeMask('#my-input'); // remove mask destroy listeners
  }
}

These are only the basic usage if you need configure some arguments you can check documentation about full api reference

📚 Detailed documentation

Read the docs or chose your implementation to check an example:

✨ Some features and behaviours

Clear the mask
- Remove listeners
Allow type only numbers
- Block user to type non-numeric chars
Allow negative numbers
- It permit user add a negative sign
Allow choose if negative sign is before or after
Allow lock the carret bar on end
Allow choose how many fractionalDigits
Allow choose decimal and thousands separators

🦾 Contribute to this project

This project needs your help, all contributions are welcome!

For it please take a look for some patterns in this documentation.

Requirements to run this project

This repository uses:

Dependencies	Description	Docs
	Javascript Runtime	📚

You can use NVM to select correct node version based on file .nvmrc.

Developing in this project

Clone it:

git clone git@github.com:codermarcos/simple-mask-money.git

Or just make a fork.

Install the dependecies whitout change the lock file:

npm ci

Just change the lock file if necessary.

Run build to generate a build:

npm run build

Before open a PR

Remember of write unit and e2e tests, and make it works!

Run unit tests

npm run test

Run e2e tests

npx cypress open

📖 Learn More

To learn more about this project, take a look at the following resources:

Typescript - understand about typescript.
Rollup - understand about the bundler used by this project.
Jest - understand about the tool that we use for write unit tests.
Cypress - understand about the tool that we use for write e2e tests.