diff --git a/README.md b/README.md index 7d3304ce..17c174d1 100755 --- a/README.md +++ b/README.md @@ -2,7 +2,7 @@ # react-number-format -React Number Format is an input-formatter library with a sophisticated and light weight caret engine. It ensures that a user can only enter text that meets specific numeric or string patterns, and formats the input value for display. +React Number Format is an input-formatter library with a sophisticated and light weight caret engine. It ensures that a user can only enter text that meets specific numeric or string patterns, and formats the input value for display. ### Features @@ -33,6 +33,11 @@ Using `yarn` yarn add react-number-format ``` +### Documentation + +Read the full documentation here +[https://s-yadav.github.io/react-number-format/docs/intro](https://s-yadav.github.io/react-number-format/docs/intro) + #### ES6 Numeric Format @@ -41,15 +46,15 @@ Numeric Format import { NumericFormat } from 'react-number-format'; ``` +NumericFormat Props: [https://s-yadav.github.io/react-number-format/docs/numeric_format](https://s-yadav.github.io/react-number-format/docs/numeric_format) + Pattern Format ```js import { PatternFormat } from 'react-number-format'; ``` -Read the full documentation here - -[https://s-yadav.github.io/react-number-format/docs/intro](https://s-yadav.github.io/react-number-format/docs/intro) +PatternFormat Props: [https://s-yadav.github.io/react-number-format/docs/pattern_format](https://s-yadav.github.io/react-number-format/docs/pattern_format) ### Migrate from v4 to v5 diff --git a/documentation/v5/docs/customization.md b/documentation/v5/docs/customization.md index 2f0bc552..0d3d1729 100644 --- a/documentation/v5/docs/customization.md +++ b/documentation/v5/docs/customization.md @@ -200,3 +200,32 @@ function CustomNumeralNumericFormat(props) { sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts" > + +### AllowEmptyFormatting on NumericFormat + +Currently allowEmptyFormatting is only available on the pattern lock, while it isn't a common usecase in NumericFormat, you still might want that behavior, you can achieve it like following. + +```js +function CustomNumberFormat(props) { + const { prefix = '', suffix = '', allowEmptyFormatting } = props; + const { format, ...numberFormatBaseProps } = useNumericFormat(props); + const _format = (numStr, props) => { + const formattedValue = format(numStr, props); + return allowEmptyFormatting && formattedValue === '' ? prefix + suffix : formattedValue; + }; + + return ; +} +``` + +
+ + Demo + + +