magic-masks
    TypeScript icon, indicating that this package has built-in type declarations

    2.2.0 • Public • Published

    Magic Masks

    This is magic! 🎩

    About

    Simple lib to you use magic masks! I always use it in my projects, but at this moment I decided to create a library for the community to use. I hope you have fun!

    Available Masks

    • cellphone
    • cellphoneOrPhone (dynamically changes)
    • clear (remove all special characters)
    • cnpj
    • cpf
    • cpfOrCnpj (dynamically changes)
    • creditCard
    • creditCardExpiry
    • currency
    • phone
    • zipCode

    Simple use

    import { clear, zipCode } from 'magic-masks';
    
    const zipCodeMasked = zipCode('00000000');
    
    console.log(zipCodeMasked); // Output is 00000-000
    
    console.log(clear(zipCodeMasked)); // Output is 00000000;

    You can use with anything

    ReactJS (uncontroled input)

    import { useRef, useCallback } from 'react';
    
    import masks from 'magic-masks';
    import PropTypes from 'prop-types';
    
    const Input = ({ name, mask }) => {
      const inputRef = useRef();
    
      const handleChangeInput = useCallback((e) => {
          const { value } = e.target;
    
          if (mask) {
            if (!masks[mask])
              throw new Error(`The magic mask ${mask} is not available!`);
    
            e.target.value = masks[mask](value);
          }
        }),
        [masks, mask];
    
      return (
        <input
          ref={inputRef}
          type="text"
          name={name}
          onChange={handleChangeInput}
        />
      );
    };
    
    Input.defaultProps = {
      mask: '',
    };
    
    Input.propTypes = {
      mask: PropTypes.string,
      name: PropTypes.string.isRequired,
    };
    
    const App = () => {
      return <Input name="zipCode" mask="zipCode" />;
    };
    
    export default App;

    React Native (uncontroled input)

    import { useRef, useCallback } from 'react';
    
    import masks from 'magic-masks';
    import PropTypes from 'prop-types';
    import { TextInput } from 'react-native';
    
    const Input = ({ name, mask }) => {
      const inputRef = useRef();
    
      const handleOnChange = useCallback((text) => {
        if (mask) {
          if (!masks[mask])
            throw new Error(`The magic mask ${mask} is not available!`);
    
          const maskedValue = masks[mask](text);
          inputRef.current.value = maskedValue;
          inputRef.current.setNativeProps({
            text: maskedValue,
          });
        }
      }, []);
    
      return <TextInput ref={inputRef} onChange={handleChangeInput} />;
    };
    
    Input.defaultProps = {
      mask: '',
    };
    
    Input.propTypes = {
      mask: PropTypes.string,
      name: PropTypes.string.isRequired,
    };
    
    const App = () => {
      return <Input name="zipCode" mask="zipCode" />;
    };
    
    export default App;

    Contributing

    Thank you for being interested on making this package better. We encourage everyone to help improving this project with some new features, bug fixes and performance issues. Please take a little bit of your time to read our guides, so this process can be faster and easier.

    Contribution Guidelines

    Take a moment to read about our Contribution Guidelines so you can understand how to submit an issue, commit and create pull requests.

    Code of Conduct

    We expect you to follow our Code of Conduct. You can read it to understand what kind of behaviour will and will not be tolerated.

    Need help?

    If you need help with Magic Masks, feel free to open an issue with a description of the problem you're facing.

    License

    MIT

    Install

    npm i magic-masks

    DownloadsWeekly Downloads

    8

    Version

    2.2.0

    License

    MIT

    Unpacked Size

    28 kB

    Total Files

    52

    Last publish

    Collaborators

    • devvini