Числовой инпут хук

PHOTO EMBED

Sat Mar 12 2022 10:17:59 GMT+0000 (Coordinated Universal Time)

Saved by @happy_cutman #react.js #typescript

/^(?!00)(?!\.)[0-9]*\.?[0-9]*$/ только цифры и точка, не может начинаться с 00 или .

export const useNumericInput = () => {
  const [value, setValue] = useState<string>('')

  const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const rgx = /^[0-9]*\.?[0-9]*$/
    const inputValue = e.target.value
    if (!inputValue.match(rgx) || inputValue.charAt(0) === '.' || inputValue.charAt(1) === '0') {
      return setValue(prevState => prevState)
    }
    return setValue(inputValue)
  };

  return { onChange, value }
};

/// ИЛИ чистый js

export const numericInputValidator = (e: React.ChangeEvent<HTMLInputElement>, inputId: string) => {
  const userInput = e.target.value
  // @ts-ignore
  const input: HTMLInputElement = document.getElementById(inputId)

  if (userInput.charAt(1) === '0') {
    input.value = '0'
  }
  if (userInput.charAt(0) === '.') {
    input.value = ''
  }
  input.value = input.value.replace(/[^0-9\.]/g,'');
  input.addEventListener("blur", () => {
    input.value = stringTrim(userInput, 10);
  });
  input.addEventListener("focus", () => {
    input.value = userInput
  })
};

content_copyCOPY