react-number-format

What's Changed

• Fix Number Formatting Order in Customization by @mhl98 in https://github.com/s-yadav/react-number-format/pull/854
• Fixed card expiry custom formatting example.
• Fixed Custom numeral example by @mhl98

New Contributors

• @mhl98 made their first contribution in https://github.com/s-yadav/react-number-format/pull/854

Full Changelog: https://github.com/s-yadav/react-number-format/compare/v5.4.1...v5.4.2

• handle caret position when float numbers are used with decimals #851
• Remove isCharacterSame as valid prop from NumericFormat and PatternFormat as its a number_format base props and shouldn't be used outside. #850
• Remove prop-types as dependency as they are no longer used. #849

Test and Build improvements

• Migrated test suite to vite, JSdom and react testing library, from Jasmine and Karma. Plus, a lot of fixes around the false negative test. Shout out to @aashu16
• A couple of build improvements @aashu16
• Unnecessary files are no longer included on npm package. Fixes #840
• Added a better way to find change range which fixes issues around duplicate subsequent characters giving incorrect change range causing inconsistent caret positioning.

API Improvements onValueChange now fires always if there is any change on the input, weather update comes from props or user events. This makes the callback more predictable. Fixed #812, Thanks to @rfviolato

Other Bug Fixes

• Fix issue when complete text is selected and replaced with new value in pattern format. It was it was incorrectly pasting value.
• Fix key press after selection over masked area. #839

• Fix caret position not getting corrected when there is selection in the input. #780

• Fix caret position getting reset on jest + testing library. #814 by @csantos1113
• Fix: pass currentTarget to onFocus. #815 by @csantos1113
• Fix #817, wrong caret position getting set when . is pressed on empty value and fixedDecimalScale is set.

• Fix infinite rerender when values.value is used valueIsNumericString not provided. #786
• Fix for delete of decimalSeparator happening when fixeDecimalScale is set. #789

• Fix https://github.com/s-yadav/react-number-format/issues/774
• Added support to inform rnf to treat two character as same.
• Fix custom numeral example
• Documentation improvement, @gregfenton, @minervabot

• Fix for prop values on not updating (not reflecting on input) on StrictMode. Regression of v5.2.0
• fix(number_format_base): prevent warnings in SRR when using useLayoutEffect. by @NicolasMontone

Regression fix: try to correct the value if the old formatted value is provided but the format prop changes

Improvements

• Optimize rendering, and avoid multiple rerender when number format is mounted.
• Try to guess valueIsNumericString based on props and value, so the user no longer has to define this prop, if the format prop (prefix/ suffix for numeric format, format prop for pattern format) doesn't have the number in it.

Fixes

• Fixes #736 - Fix for focus on mount getting reset.
• Fixed #740 - fixed type for the format, removeFormat, getCaretBoundary.
• Fixed #741 - Thousand and decimal formatting broken while typing when value isNumericString is set to false
• Fixed #742 - cursor position getting changed when format props are updated during typing.
• Fixed #725 - The cursor position not being correct when allowed decimal separator is typed
• Fixed a couple of false positive tests and some regressions around those.

• Fixed #694 Prefix/Suffix containing numbers gets appended to value.
• Fixed #691 Prefix/Suffix blocking input when set to a number
• Fixed #729 Prefix '-' does not allow to remove first number
• Added fixedDecimalScale prop to doc #735 by @arminbashizade

• Fixed #712 (Extra character added if you start typing from start of the input while input is fully filled)
• Fixed #711 (The caret is not moved when typing a decimal separator at an existing decimal separator)
• Mark module as side effect free (#713 by @topaxi )
• pass type parameter to SyntheticEvent in event source object. (#703 by @yukiyokotani )

• Fixed typo on patternFormatter export. #698
• Fixed cursor position getting reset if isAllowed returns false. #699
• Fixed doc for isAllowed prop. #697 by @3794

• Fixed #652
• Fixed #695
• Added isValidInputCharacter in NumberFormatBase to figure out if a character is allowed to be typed. This mostly used internally by NumericFormat, but exposed to NumberFormatBase, if customization is needed.

• Fixed https://github.com/s-yadav/react-number-format/issues/679 (@louismariegaborit)
• Fixed https://github.com/s-yadav/react-number-format/issues/678
• Return all required props for NumberFormatBase from useNumericFormat and usePatternFormat hooks

RNF v5 is complete rewrite with the aim of extensibility and smaller bundle size. Here are following changes on v5. Most of them are breaking change, but would take minimal effort from migrating from v4 to v5. See migration doc

Changes

• React number format is broken into smaller Modules, NumericFormat and Pattern Format, so only things you need are exposed.
• RNF provides lower level hooks and component (useNumericFormat, usePatternFormat) to allow full customisation. Check customisation doc.
• customNumerals prop is removed in favour of outside customization, example
• isNumericString prop is renamed to valueIsNumericString.

• Fix regular expression for custom numerals. PR: #594 By @aSosunoff
• Fixed backspace issue when caret is before - sign (#597)
• React peer dependency fix - PR: #565 By @navarroaxel
• make typings for customInput generic - PR #577 By @patsimm

• Add source details in onValueChange callback
• Issues: #587 #429

• Fix issue #481 . PR by @natterstefan - #560

• Fix input focus issue post blur #541 by @ThanoozN

• Release for a long asked bugfix/feature of allowing deleting partial characters when the format is provided. By @jologz PR: #473
• Documentation fixes by @alexanderdavide #546

• Adds new export signatures #536

• Currently, the library does not support passing exponential/scientific numbers. This PR adds support for that. This fixes: #506 and #519.
• Added prettier.
• Use Bublejs for bundling which results in a smaller build than the babel

• Fix value replacement issue when the last value is the same as the value being replaced by. PR: #516

• Fix for full value replacement issue : #511

• Fix onChange issue when isAllowed returns false #505

• Fix decimal scale issues #501
• Improve renderText API to allow passing custom props #484

• Fix IOS keypad issue (which doesn't allow - sign to be added) #409
• Use the default value if the value as null is provided. #462, #347
• Fixed #481, add inputmode=numeric only on client-side

• Added inputMode = numeric by default on input so in mobile browser proper keyboard should open. #189, #312
• Fix type declaration #374. Added allowLeadingZeros on types. #385
• Fixed #386. Clear the input on blur if ony - is added.
• Added prop-type defination for RefObject #384
• Fixed issue with dot separator when decimalScale is set to zero #376 (By @sergei97k )

• Added allowedDecimalSeparators props which user can type to add decimals.

<NumberFormat allowedDecimalSeparators={[',', '.']} thousandSeparator="." decimalSeparator="," />

#331 (By @techno1ology, @nmalzieu)

• Added prop to keep leading zeros.
• Fixed thousand separator bug on leading zeros
• Typo fixes in the readme

• Type support for customInput props. #330 (By @Yankovsky)
• Allow getting customInput ref using getInputRef. #329 (By @cawinkelmann)