Как сделать маску на input в react?

Question

[HalvinBRO]

Всем привет!

Хочу добавить маску для input. Сам input предназначен для ввода цены.
Вот примеры того, что я могу вводить:

• 1;
  
• 10;
  
• 100;
  
• 1000;
  
• 10000;
  
• 100000;
  
• 10000000;
  
• 10000.22;
  

Что мне нужно видеть при вводе:

• 1;
  
• 10;
  
• 100;
  
• 1 000;
  
• 10 000;
  
• 100 000;
  
• 10 000 000;
  
• 10 000.22;
  

Использую для работы с формой react-hook-form и react-input-mask. Не могу найти решение. Возможно как-то помогут регулярки, но в них еще не разобрался толком.
В этом случае маска должна быть динамической, то есть отступы появляются в нужных местах в зависимости от длины строки суммы.

Копейки не обязательны.

Хелп!

Answer 1

[Elvis]

'1234567890.45'.replace(/\B(?=(\d{3})+(?!\d))/g, " ");

'1 234 567 890.45'

Comments

[Elvis]

Вот еще пример
https://codesandbox.io/s/react-currency-input-with...

[Elvis]

в CurrencyInput.js поменять запятую на пробел в параметре thousandsSeparatorSymbol и установить например лимит количества знаков в integerLimit

[Alexandroppolus]

лучше использовать готовый модуль, потому что задача по факту чуть более геморная, чем кажется на первый взгляд: надо проследить, чтобы курсор не улетал в конец или начало, после редактирования в середине строки, редактирования выделенного фрагмента, а так же вставки из буфера при этих условиях. Там возникает много различных кейсов.

[halvin]

Alexandroppolus, да, нативно очень трудно избежать гемора. В первую очередь с чем я столкнулся -- это курсор остающийся не в конце строки при разделении цены пробелом. Уверен, там дальше еще больше артефактов)

[halvin]

Elvis, спасибо! Работает отлично :) Есть, конечно, тут небольшой минус, что при попытке стереть пробел, курсор передвигается на один пробел влево(визуально пробел остается), а ожидаю, что сотрется цифра перед пробелом. Но это уже более мелочная проблема нежели прыгающий курсор.