Add `onComplete` optional prop

Hey!
Firstly, I would like to congratulate you for the library. This was exactly what I was looking for! 🫶

I'd like to suggest the implementation of an optional prop onComplete (we can figure out a better name if necessary) that will call a function when the last input is filled. For example, let's suppose we have a code validation form with 4 digits. When the user enters the 4th digit, I would like to automatically call and endpoint to validate the code, without the need to click on anything or submit a form.

Do you think it makes sense to be added?
I can work on the implementation if necessary.

Thank you 🤠

Thank you for the kind words.

I like your proposal, because most of the time we're probably interested in complete values only and I've seen many people check for the length in the onChange handler.

You can go ahead and implement it if you want.

As for the naming, I can't think of anything else. So we can go with that, I guess.

Hey, @andreaswilli!
Thank you for the reply! I added this to my doing list, and I'll try to work on that during this weekend.

Just so we can be on the same page: my initial idea was to check if the newInputVal.length is equal to the length. If true, check if the onComplete prop exists and then call it. What do you think about this approach?

react-verification-input/src/index.js

Lines 52 to 57 in cd1394d

    
           if (RegExp(`^[${validChars}]{0,${length}}$`).test(newInputVal)) { 
        
             if (onChange) { 
        
               onChange?.(newInputVal); 
        
             } 
        
             setLocalValue(newInputVal); 
        
           }

if (RegExp(`^[${validChars}]{0,${length}}$`).test(newInputVal)) { 
   if (onChange) { 
     onChange?.(newInputVal); 
   }
   
   setLocalValue(newInputVal);
   
+   if (newInputVal.length === length) {
+     onComplete?.(newInputVal)
+   }
}

Let me know if you think there is a better approach!

Looks good to me 👍🏼

Released v3.3.0

	if (RegExp(`^[${validChars}]{0,${length}}$`).test(newInputVal)) {
	if (onChange) {
	onChange?.(newInputVal);
	}
	setLocalValue(newInputVal);
	}