React-easy-mask NPM

react-easy-mask

A simple masked input to React

Install

npm install --save react-easy-mask
or
yarn add react-easy-mask

Usage

import React from 'react';
import { MaskedNumber } from 'react-easy-mask'

const App = () => {
  return (
    <MaskedNumber mask="###.##.#" onChangeValue={console.log} />
  );
};

export default App;

Components

MaskedNumber

Props | Name | Type | Description | Example | Return | |:---------------|:---------------|:--------------:|--------:| ---------------:| | mask |string | a mask pattern | ###.##.#| - | | onChangeValue |function | change event | |unmasked value | | ref |IMaskedNumberRef| input ref | | - |
Ref | Name | Type | Description | Return | |:---------------|:----------------|:-------------------------| -------:| | getValue |function | gets input value |string | | setValue |function | sets input value | - | | focus |function |sets focus on the input | - | | blur |function |removes focus on the input| - |

MaskedCurrency

Props
Name Type Description Example Return
locale string BCP 47 tag pt-BR -
currency string SO 4217 code BRL -
onChangeValue function change event number
max number max value -
ref IMaskedCurrencyRef input ref -
Ref | Name | Type | Description | Return | |:---------------|:----------------|:-------------------------| -------:| | getValue |function | gets input value |number | | setValue |function | sets input value | - | | focus |function |sets focus on the input | - | | blur |function |removes focus on the input| - |