Nifty Pony Merchandise

    mask-hooks

    1.3.2 • Public • Published

    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

    📄 Licença

    Este projeto está sob a licença MIT - veja o arquivo LICENSE.md para detalhes.

    Install

    npm i mask-hooks

    DownloadsWeekly Downloads

    2

    Version

    1.3.2

    License

    MIT

    Unpacked Size

    15.7 kB

    Total Files

    10

    Last publish

    Collaborators

    • guilhermeasn