https://github.com/codermarcos/simple-mask-money

💰 Simple mask money is a light, safe and typed package to format money!
https://github.com/codermarcos/simple-mask-money

currency-mask dinheiro javascript mask masks moeda money-mask

Last synced: 1 day ago
JSON representation

💰 Simple mask money is a light, safe and typed package to format money!

Host: GitHub
URL: https://github.com/codermarcos/simple-mask-money
Owner: codermarcos
License: other
Created: 2017-09-04T04:24:27.000Z (over 8 years ago)
Default Branch: main
Last Pushed: 2025-02-03T00:53:39.000Z (11 months ago)
Last Synced: 2025-11-20T21:05:30.868Z (about 2 months ago)
Topics: currency-mask, dinheiro, javascript, mask, masks, moeda, money-mask
Language: TypeScript
Homepage: http://simple-mask-money.codermarcos.zone/
Size: 2.32 MB
Stars: 174
Watchers: 6
Forks: 21
Open Issues: 2
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
- Security: SECURITY.md

Awesome Lists containing this project

awesome-typescript - simple-mask-money - 💰 Simple mask money is a light, safe and typed package to format money! (Built with TypeScript / Libraries)

README

          
SimpleMaskMoney




  ⚠️WARNING⚠️


  If you are having problems please check the version that you are using. 


  This package follows the semantic versioning try to keep it updated with the latest version.





  

    

  

  

    

  

  

    

  

  

    

  



Simple money mask developed with pure JavaScript 🗃️ **0 _dependecies_**, 🍃 Super light just **1.65kB gzipped**, 🔒 **100% Secure** (no [npm audit problems](https://docs.npmjs.com/auditing-package-dependencies-for-security-vulnerabilities) or [dependabot issues](https://github.com/codermarcos/simple-mask-money/security/dependabot)) which you can run on **Client Side** and **Server Side**. [Try **live demo**](https://simple-mask-money.codermarcos.zone/).

## 🎉 Getting Started

### Installation

First install it:

```shell

  npm i simple-mask-money --save

```

Or access the GitHub release directly:

```html

```

> Remember to replace **** with the [latest version](https://github.com/codermarcos/simple-mask-money/releases/latest)

### 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**:

```tsx

import { useEffect } from 'react';

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

function InputMoneyComponent() {

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

  return 

}

```

If you prefer you can use a [ref](https://react.dev/learn/referencing-values-with-refs):

```tsx

import { useEffect } from 'react';

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

function InputMoneyComponent() {

  const inputRef = useRef(null);

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

  return 

}

```

> These are only the basic usage if you need configure some arguments you can check [documentation about full api reference](./docs/4.x.x/)

#### Vanilla JS Basic Example

Here is a usage example with Vanilla JS:

```html

  

    

    

    

    

    

      // 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);

    

  

```

> These are only the basic usage if you need configure some arguments you can check [documentation about full api reference](./docs/4.x.x/)

#### Vue JS Basic Example

Here is a usage example with Vue JS:

```html

  

    

  

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

  },

}

```

> These are only the basic usage if you need configure some arguments you can check [documentation about full api reference](./docs/4.x.x/)

#### Angular Basic Example

Here is a usage example with Angular JS:

```javascript

import { setMask, removeMask, formatToNumber } from 'simple-mask-money'; // import mask

import { Component, OnInit, AfterViewInit } from '@angular/core';

@Component({

  template: ''

})

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](./docs/4.x.x/)

## 📚 Detailed documentation

Read the [docs](docs/) or chose your implementation to check an example:

* [JavaScript](examples/4.x.x/vanilla)

* [Angular](examples/4.x.x/angular)

* [React](examples/4.x.x/react)

* [Node](examples/4.x.x/node)

* [Vue](examples/4.x.x/vue)

## ✨ 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](https://github.com/codermarcos/simple-mask-money/blob/main/CONTRIBUTING.md).

### Requirements to run this project

This repository uses:

| Dependencies                                 | Description        | Docs             |

| -------------------------------------------- | ------------------ | ---------------- |

| [![node-version]][node-download]             | Javascript Runtime | [📚][node-doc]   |

> You can use [NVM][nvm-download] to select correct node version based on file `.nvmrc`.

### Developing in this project

1. Clone it:

```bash

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

```

Or just [make a fork](https://docs.github.com/en/get-started/quickstart/fork-a-repo).

2. Install the dependecies whitout change the lock file:

```bash

npm ci

```

> Just change the lock file if necessary.

3. Run build to generate a build:

```bash

npm run build

```

### Before open a PR

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

1. Run unit tests

```bash

npm run test

```

2. Run e2e tests

```bash

npx cypress open

```

## 📖 Learn More

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

* [Typescript][ts-doc] - understand about typescript.

* [Rollup][rollup-doc] - understand about the bundler used by this project.

* [Jest][jest-doc] - understand about the tool that we use for write unit tests.

* [Cypress][cypress-doc] - understand about the tool that we use for write e2e tests.

[node-download]: https://nodejs.org/en/download/

[node-doc]: https://nodejs.org/docs/latest-v20.x/api/documentation.html

[node-version]: https://img.shields.io/badge/node-latest-blue

[nvm-download]: https://github.com/nvm-sh/nvm

[ts-doc]: https://www.typescriptlang.org/docs/handbook/typescript-in-5-minutes.html

[rollup-doc]: https://rollupjs.org/configuration-options/

[jest-doc]: https://jestjs.io/pt-BR/docs/using-matchers

[cypress-doc]: https://docs.cypress.io/guides/overview/why-cypress#Writing-tests