mask-hooks
Funções e react hooks para aplicar máscaras a variáveis de controle de inputs ou para exibição de dados!
Functions and react hooks for applying masks to data inputs and outputs
📋 Pré-requisitos
- node
- npm
- react
🚀 Começando
Execute no terminal o comando abaixo para instalar o mask-hooks no seu projeto
npm install mask-hooks --save
🛠️ Exemplos de Uso
- useMaskState: Um substituto do rect hook useState para o uso de mascaras
import { useMaskState } from 'mask-hooks';
export default function MaskPhone() {
const [value, setValue] = useMaskState('', {
mask: '(??) ????-????'
});
return (
<>
<input type='text' value={ value } onChange={ input => setValue(input.currentTarget.value) } />
</>
);
}
- useMaskState com preset: para máscaras pré-configuradas
import { useMaskState, presets } from 'mask-hooks';
export default function MaskPhone() {
const [value, setValue] = useMaskState('', presets.PHONE_BR);
return (
<>
<input type='text' value={ value } onChange={ input => setValue(input.currentTarget.value) } />
</>
);
}
- useMask: utilize este para aplicar mascaras em muitos contextos diferentes, por exemplo, com dispatches do redux ou simples exibição de uma informação
import { useMask, presets } from 'mask-hooks';
export default function MaskDocs() {
const documentMask = useMask(presets.DOCUMENT_CPF_CNPJ); /* { mask: [ "???.???.???-??" , "??.???.???/????-??" ] } */
return (
<>
<p>{ documentMask('11122233345') /* print 111.222.333-45 */ }</p>
<p>{ documentMask('11222333000145') /* print 11.222.333/0001-45 */ }</p>
</>
);
}
- Configure além das mascaras, placeholders, filtros, e direção de preenchimento
import { useMaskState, filters, modes } from 'mask-hooks';
export default function MaskBRL() {
// Resultado ao começar a digitar R$ 0,00
const [value, setValue] = useMaskState('', {
mask: 'R$ *,??',
mode: modes.REVERSE,
filter: filters.NUMERICS,
placeholder: '0'
});
return (
<>
<input type='text' value={ value } onChange={ input => setValue(input.currentTarget.value) } />
</>
);
}
- Utilize as mascáras diretamente com os components MaskInput e MaskOutput
import { useState } from 'react';
import { MaskInput, MaskOutput } from 'mask-hooks';
export default function MaskComponents() {
const [value, setValue] = useState('');
return (
<>
<MaskInput className='form-control' value={ value } onChange={ input => setValue(input.currentTarget.value) } mask='???.???.???-??' mode='reverse' />
<MaskOutput filter='letters' mask='{1|, }'>abcdefghijklmnopqrstuvwxyz</MaskOutput>
</>
);
}
🛠️ Constantes disponíveis
- filters : object
- modes : object
- presets : object
🛠️ Métodos disponíveis
- mask(target, mask, filter = filters.NUMBERS, mode = modes.AUTO, placeholder = null) : string
- applyMask(target, config) : string
- useMask(config) : function
- useMaskState(initialState, config) : array[const, function]
🛠️ Configurações
- Criação de máscaras
Caracter: ? - será substituido por um caracter do target.
Caracter: * - será substituido pelo restante do target.
Padrão: {<numero>|<caracter>} - por exemplo {3|,} funciona como o caracter *, porém adiciona um caracter entre o restante do target de acordo com a quantidade desejada para a separação.
- Outras configurações
Filtro: retira determinados caracteres do target, você pode importar uma lista de filtros em filters, opções de filters pré-configurados: NUMBERS, LETTERS, CHARACTERS ou NONE.
Mode: direção do preenchimento do target, você pode importar as opções disponíveis em modes, opções de modes: AUTO, NORMAL ou REVERSE.
Placeholder: enquanto a mascara não for toda preenchida os caracteres * e ? serão prenchidos com o placeholder
-
Mascáras Pré-configuradas;
Você poderá utilizar uma mascará pré-configurada importando presets, como estas:
- ONLY_NUMBERS
- DATE_STAMP
- DATE_PTBR
- DATETIME_STAMP
- DATETIME_PTBR
- PHONE_USA
- PHONE_BR
- CURRENCY_POINT
- CURRENCY_COMMA
- CURRENCY_PTBR
- DOCUMENT_CPF
- DOCUMENT_CNPJ
- DOCUMENT_CPF_CNPJ
- IP_V4
✒️ Autor
- Guilherme Neves - repositórios github
📄 Licença
Este projeto está sob a licença MIT - veja o arquivo LICENSE.md para detalhes.