@quvels/use-mask v1.0.3

useMask

Install

npm install @quvels/use-mask

Quick start

import { ChangeEvent, useState } from 'react';
import { useMask } from '@quvels/use-mask';

function App() {
  const [maskedValue, setMaskedValue] = useState('');
  const [realValue, setRealValue] = useState('');

  const mask = useMask('(###) ###-####', {
    '#': /[0-9]/,
  });

  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
    const [maskedValue, realValue] = mask(event.target.value);
    setMaskedValue(maskedValue);
    setRealValue(realValue);
  };

  return (
    <div className='App'>
      <h1>useMask</h1>
      <div className='card'>
        <img src='logo.svg' alt='useMask Logo' title='useMask' />
        <input type='text' onChange={handleChange} value={maskedValue} />
        <div>
          <h2>Masked value:</h2>
          <p>" {maskedValue} "</p>
          <h2>Real value:</h2>
          <p>" {realValue} "</p>
        </div>
      </div>
    </div>
  );
}

export default App;

useMask

useMask(regex: string, patterns?: Patterns) => (string) => [string, string]

Return

(string) => [string, string]

A function that recevies a string and returns a tuple that the first value is the "masked value" and the second is the "real value"

Tokens

Examples

Phone number

useMask('(###) ###-####', {
    '#': /[0-9]/,
});

Phone number with country code

useMask('+#{1,3} (###) ###-####', {
    '#': /[0-9]/,
});

Card number

useMask('####-####-####-####', {
    '#': /[0-9]/,
});

Development

Installation

npm run install

Running demo

npm run demo

Running unit tests

npm run test