REDUCE MASK

Simple and light mask in react, can use mult mask for same input.

This mask don't break your cursor, will re position the cursosr to relative final position.

• Work in Mobile, Safari, Mozila etc.
• Re position text cursor to relative position.
• Return evt with masked and unmasked value.
• Accept multiple masks, use the mask best fits for the value.
• Will update if change [mask, defaultValue, onChange]

in the future:

Other formats than numbers

I will help if you have any difficulty =)

Contact me by github:heyderpd. I'll be glad to help you.

Thanks for npm~lucasmreis

• The mask accept only number in this version
• Mask accept any char, but '_' is a placeholder for the number

Example of Mult Mask:

import ReduceMask from 'reduce-mask'

const onChange = evt => {
  const { value, maskedValue } = evt.target
  /*
    value = '12345678912'
    maskedValue = '123.456.789-12'

    do your this.setState(evt)
  */
}

<ReduceMask
  name='cpf/cnpj'
  mask={['___.___.___-__', '__.___.___/____-__']}
  placeholder='Ex: 123.456.789-12'
  defaultValue='12345678912'
  onChange={onChange}
/>

Example:

<ReduceMask
  name='phone'
  mask='(__) ____-_____'
  placeholder='Ex: (99) 1234-5678'
  defaultValue='9912345678'
  onChange={onChange}
/>

<ReduceMask
  name='cpf'
  mask='___.___.___-__'
  placeholder='Ex: 123.456.789-12'
  onChange={onChange}
/>

<ReduceMask
  name='cnpj'
  mask='__.___.___/____-__'
  placeholder='Ex: 12.456.789/1234-56'
  onChange={onChange}
/>