JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-mask/1.8.7/mask.js"></script>
<body ng-app="myApp" ng-controller="myCtrl">
    <input ng-model="cc.number" ui-mask="{{cc.mask}}" ui-options="maskOptions" />
    <pre>{{cc|json}}</pre>
</body>

JavaScript

// the main (app) module
var myApp = angular.module("myApp", ['ui.mask']);

// add a controller
myApp.controller("myCtrl", function($scope) {
	$scope.cc = {number:'', type:{}, mask:''};
  $scope.maskOptions = {
	  allowInvalidValue:true //allows us to watch the value
  };
  $scope.$watch('cc.number', function(newNumber){
    $scope.cc.type = getCreditCardType(newNumber);
    $scope.cc.mask = getMaskType($scope.cc.type);
	});
});

function getMaskType(cardType){
	var masks = {
  	'mastercard': '9999 9999 9999 9999',
    'visa': '9999 9999 9999 9999',
    'amex': '9999 999999 99999',
    'diners': '9999 9999 9999 99',
  	'discover': '9999 9999 9999 9999',
    'unknown': '9999 9999 9999 9999'
	};
  return masks[cardType];
}

function getCreditCardType(creditCardNumber) { 
	// start without knowing the credit card type
	var result = "unknown";

	// first check for MasterCard
	if (/^5[1-5]/.test(creditCardNumber)) {
    	result = "mastercard";
	} 
	// then check for Visa
	else if (/^4/.test(creditCardNumber)) {
		result = "visa";
	}
	// then check for AmEx
	else if (/^3[47]/.test(creditCardNumber)) {
		result = "amex";
	} 
	// then check for Diners
	else if (/3(?:0[0-5]|[68][0-9])[0-9]{11}/.test(creditCardNumber)) { 
		result = "diners"
	}
	// then check for Discover
	else if (/6(?:011|5[0-9]{2})[0-9]{12}/.test(creditCardNumber)) {
		result = "discover";
	} 
	
	return result;
}