JSFiddle - React, Tailwind, and code Playground

HTML

<input type="text" name="" id="testip"/>
<script type="text/javascript">
    (function($){
	jQuery.fn.ipmask = function(opt){
		var param = $.extend({
			ver: 'v4'
		}, opt),
            input = this,
            curVal = '',

            v4maskRegFull = new RegExp("^(25[0-5]|2[0-4][0-9]|[0-1][0-9]{2}|[0-9]{2}|[0-9])(\\.(25[0-5]|2[0-4][0-9]|[0-1][0-9]{2}|[0-9]{2}|[0-9])){3}$"),
            v4maskRegPart = new RegExp("^(25[0-5]|2[0-4][0-9]|[0-1][0-9]{2}|[0-9]{2}|[0-9])((\\.)|(\\.(25[0-5]|2[0-4][0-9]|[0-1][0-9]{2}|[0-9]{2}|[0-9])){0,1}){0,3}$"),

            checkKey = function(val){
                // соотвествует ли введенный символ
                if(v4maskRegPart.test(curVal+val)) return true;
                // пробуем поставить перед символом точку
                else if(v4maskRegPart.test(curVal+'.'+val)) {
                    input.val(curVal+'.');
                    return true;
                }
                else return false;
            },

            // вставить разделитель если надо
            addDot = function(){
                curVal = input.val();
                if(!v4maskRegPart.test(curVal+1) && v4maskRegPart.test(curVal+'.')) return input.val(curVal+'.');
            }

            onKeypress = function(e){
                var k = e.which;
                curVal = input.val();

                if (e.ctrlKey || e.altKey || e.metaKey || k<32) {
                    return true;
                }else if (k){
                    var key = String.fromCharCode(k);

                    // соответствует ли добавление символа регулярному выражению
                    if(!checkKey(key)) return e.preventDefault();
                    else return addDot;

                }
            },
            onBlur = function(){ if(!v4maskRegFull.test(input.val())) input.val(''); }

        return this.bind('keypress',onKeypress).bind('blur',onBlur);
	};
})(jQuery);
    $('#testip').ipmask();
</script>