Breaking News: Grepper is joining You.com. Read the official announcement!

ssn input react

calderwoodra answered on May 10, 2024 Popularity 2/10 Helpfulness 8/10

answer ssn input react

ssn input react

Comment

export function useSSN(obfuscated: boolean, s = "-"): [string, (e: React.ChangeEvent<HTMLInputElement>) => void] {
  const [value, setValue] = useState("");
  const [obfuscatedValue, setObfuscatedValue] = useState(value);

  const obfuscatedUpdate = (e: React.ChangeEvent<HTMLInputElement>) => {
    let newValue = e.target.value;

    const newValueLength = newValue.length;
    newValue = value + newValue.replace(/[^0-9]/g, "");
    // handle backspace at dash positions
    if (
      value.substr(-1) === s &&
      newValue === value
    ) {
      setValue(value.substring(0, value.length - 2));
      setObfuscatedValue(value.substring(0, value.length - 2).replace(/[0-9]/g, "*"));
      return;
    }

    // handle backspace
    if (value === newValue) {
      setValue(value.substring(0, newValueLength));
      setObfuscatedValue(value.substring(0, newValueLength).replace(/[0-9]/g, "*"));
      return;
    }

    // strip out non-numeric characters
    newValue = newValue.replace(/[^0-9]/g, "");

    // insert dashes & limit to 9 characters
    if (newValue.length > 2 && newValue.length < 5) {
      newValue = newValue.substring(0, 3) + s + newValue.substring(3);
    } else if (newValue.length >= 5) {
      newValue =
        newValue.substring(0, 3) +
        s +
        newValue.substring(3, 5) +
        s +
        newValue.substring(5, 9);
    }

    setValue(newValue);
    setObfuscatedValue(newValue.replace(/[0-9]/g, "*"));
  };

  const unobfucatedUpdate = (e: React.ChangeEvent<HTMLInputElement>) => {
    let newValue = e.target.value;

    // handle backspace at dash positions
    if (
      value.substr(-1) === s &&
      newValue === value.substring(0, value.length - 1)
    ) {
      setValue(value.substring(0, value.length - 2));
      setObfuscatedValue(value.substring(0, value.length - 2).replace(/[0-9]/g, "*"));
      return;
    }

    // strip out non-numeric characters
    newValue = newValue.replace(/[^0-9]/g, "");
    // insert dashes & limit to 9 characters
    if (newValue.length > 2 && newValue.length < 5) {
      newValue = newValue.substring(0, 3) + s + newValue.substring(3);
    } else if (newValue.length >= 5) {
      newValue =
        newValue.substring(0, 3) +
        s +
        newValue.substring(3, 5) +
        s +
        newValue.substring(5, 9);
    }

    setValue(newValue);
    setObfuscatedValue(newValue.replace(/[0-9]/g, "*"));
  };

  return [obfuscated ? obfuscatedValue : value, obfuscated ? obfuscatedUpdate : unobfucatedUpdate];
}

const YourComponent = () => {
  const [obfuscated, setObfuscated] = useState(false);
  const [value, setValue] = useSSN(obfuscated);
  
  return (
    <input ... />
  );
}

Popularity 2/10 Helpfulness 8/10 Language javascript

Source: Grepper

Tags: input javascript

Link to this answer
Share Copy Link

Contributed on May 10 2024

calderwoodra

0 Answers Avg Quality 2/10

ssn input react

Contents

More Related Answers

ssn input react

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.