added is-ip and helperText to softly validate input

[marcoka2000]

Added a subtle helperText which softly validates if it looks a valid IPv4 address

[LapsTimeOFF]

In my opinion, the code can be optimized:

• The add of a whole new package is-ip adds useless weight to the app, it can be very simply replaced by a RegExp

const regex = /^(?:\d{1,3}\.){3}\d{1,3}$/gm

See in action here

• The HelperText has a very poor accessibility contrast, Material UI (which is used in this project), does includes an error property on the TextField component, which would make it more accessible for users:

  return (
    <TextField
      error
      id="wled-device-ip-input"
      label="WLED Device IP"
      color="secondary"
      variant="outlined"
      value={ipInput}
      onChange={(event) => setIpInput(event.target.value)}
      helperText={
        isIPv4(ipInput)
          ? '✔ This looks fine.'
          : 'Please use the IPv4 format xxx.xxx.xxx.xxx'
      }
    />
  );

And according to my proposition above, isIPv4 would use a function within this file and not using an external module.

Documentation reference

[marcoka2000]

@LapsTimeOFF Hey, I just quickly wanted to say thanks for the good explanation, as someone who is not so fluent with all the newer React Frameworks I learned more from your detailed comment, than I did while tinkering on my own yesterday for several hours 👍

(Actually, this was exactly the outcome I tried to achieve, so the explanation is even more valuable to me 💯 )