@react-input/number-format - npm Package Compare versions

Comparing version 1.1.3 to 2.0.0

package.json

 {
   "name": "@react-input/number-format",
-  "version": "1.1.3",
+  "version": "2.0.0",
   "license": "MIT",
@@ -36,24 +36,27 @@ "author": "Nikolay Goncharuk <[e-mail]>",
   "files": [
-    "dist"
+    "@types",
+    "cdn",
+    "module",
+    "node"
   ],
   "sideEffects": false,
   "type": "module",
-  "types": "dist/@types/index.d.ts",
-  "module": "dist/module/index.js",
-  "main": "dist/node/index.cjs",
+  "types": "@types/index.d.ts",
+  "module": "module/index.js",
+  "main": "node/index.cjs",
   "exports": {
     ".": {
-      "types": "./dist/@types/index.d.ts",
-      "import": "./dist/module/index.js",
-      "require": "./dist/node/index.cjs"
+      "types": "./@types/index.d.ts",
+      "import": "./module/index.js",
+      "require": "./node/index.cjs"
     },
     "./*": {
-      "types": "./dist/@types/*.d.ts",
-      "import": "./dist/module/*.js",
-      "require": "./dist/node/*.cjs"
+      "types": "./@types/*.d.ts",
+      "import": "./module/*.js",
+      "require": "./node/*.cjs"
     },
     "./*.js": {
-      "types": "./dist/@types/*.d.ts",
-      "import": "./dist/module/*.js",
-      "require": "./dist/node/*.cjs"
+      "types": "./@types/*.d.ts",
+      "import": "./module/*.js",
+      "require": "./node/*.cjs"
     }
@@ -63,7 +66,7 @@ },
     "*": {
-      "dist/@types/index.d.ts": [
-        "dist/@types/index.d.ts"
+      "@types/index.d.ts": [
+        "@types/index.d.ts"
       ],
       "*": [
-        "dist/@types/*"
+        "@types/*"
       ]
@@ -76,9 +79,9 @@ }
   "scripts": {
-    "build": "ts-node ../../scripts/build.ts",
-    "release:major": "ts-node ../../scripts/release.ts major",
-    "release:minor": "ts-node ../../scripts/release.ts minor",
-    "release:patch": "ts-node ../../scripts/release.ts patch"
+    "build": "tsx ../../scripts/build.ts",
+    "release:major": "tsx ../../scripts/release.ts major",
+    "release:minor": "tsx ../../scripts/release.ts minor",
+    "release:patch": "tsx ../../scripts/release.ts patch"
   },
   "dependencies": {
-    "@react-input/core": "^1.0.19"
+    "@react-input/core": "^2.0.0"
   },
@@ -85,0 +88,0 @@ "peerDependencies": {

README.md

@@ -13,2 +13,12 @@ # @react-input/number-format
 
+## What's new?
+
+Usage via CDN is available (see «[Usage with CDN](https://github.com/GoncharukOrg/react-input/tree/main/packages/number-format#usage-with-cdn)»).
+
+The `input-number-format` event and `onNumberFormat` method are no longer available in newer versions, focusing work on only using React's own events and methods such as `onChange`, since the `input-number-format` event and `onNumberFormat` method cannot be explicitly coordinated with React's events and methods, making such usage and event firing order non-obvious.
+
+To use the useful data from the `detail` property of the `input-number-format` (`onNumberFormat`) event object, you can also use the utilities described in the «[Utils](https://github.com/GoncharukOrg/react-input/tree/main/packages/number-format#utils)» section.
+
+**Documentation for version `v1` is available [here](https://github.com/GoncharukOrg/react-input/tree/v1/packages/number-format).**
+
 ## Installation
@@ -26,2 +36,8 @@
 
+or using **CDN** (for more information, see [UNPKG](https://unpkg.com/)):
+
+```html
+<script src="https://unpkg.com/@react-input/number-format/cdn"></script>
+```
+
 ## Unique properties
@@ -44,3 +60,2 @@
 | `maximumFractionDigits` |                        `number`                        |             | The maximum number of fraction digits to use. The default for plain number formatting is the larger of `minimumFractionDigits` and `3`. The default for currency formatting is the larger of `minimumFractionDigits` and the number of minor unit digits provided by the [ISO 4217 currency code list](https://www.six-group.com/dam/download/financial-information/data-center/iso-currrency/lists/list-one.xml) (`2` if the list doesn't provide that information). The default for percent formatting is the larger of `minimumFractionDigits` and `0`. |
-| `onNumberFormat`        |                       `function`                       |             | Handler for the custom event `input-number-format`. Called asynchronously after the `change` event, accessing the `detail` property containing additional useful information about the value. (see «[Number format event](https://github.com/GoncharukOrg/react-input/tree/main/packages/number-format#format-event)»).                                                                                                                                                                                                                                    |
 
@@ -53,3 +68,3 @@ > Since the package is based on the `Intl.NumberFormat` constructor, it is important to consider that the functionality of both the package itself and its properties will depend on your browser versions. You can view support for browser versions [here](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat).
 
-## Usage
+## Usage with React
 
@@ -89,2 +104,30 @@ The `@react-input/number-format` package provides two options for using formatting. The first is the `InputNumberFormat` component, which is a standard input element with additional logic to handle the input. The second is using the `useNumberFormat` hook, which needs to be linked to the `input` element through the `ref` property.
 
+## Usage with CDN
+
+To use the library's capabilities, you can also load it via CDN.
+
+When loaded, you get a global `ReactInput.NumberFormat` class, calling it with the specified formatting parameters will create a new object with two methods, the first one is `register`, which applies the formatting when typing into the specified element, and the second one is `unregister`, which undoes the previous action. The following example illustrates this usage:
+
+```js
+const numberFormat = new ReactInput.NumberFormat({
+  locales: 'en',
+  maximumFractionDigits: 2,
+});
+
+const elements = document.getElementsByName('amount');
+
+elements.forEach((element) => {
+  numberFormat.register(element);
+});
+
+// If necessary, you can turn off formatting while typing.
+// elements.forEach((element) => {
+//   numberFormat.unregister(element);
+// });
+```
+
+Note that this way you can register multiple elements to which input formatting will be applied.
+
+> While you can use a class to format input, using a hook or component in the React environment is preferable due to the optimizations applied, where you don't have to think about when to call `register` and `unregister` for input formatting to work.
+
 ## Initializing the value
@@ -100,3 +143,6 @@
 
-const options = { locales: 'en', maximumFractionDigits: 2 };
+const options = {
+  locales: 'en',
+  maximumFractionDigits: 2,
+};
 
@@ -179,31 +225,2 @@ export default function App() {
 
-## Number format event
-
-It can be useful to have additional data about the value at hand, for this you can use the `input-number-format` event.
-
-The `input-number-format` event is fired asynchronously after the `change` event, in addition, the `input-number-format` event object has a `detail` property that contains additional useful information about the value:
-
-| Name     |   Type   | Description                                     |
-| -------- | :------: | ----------------------------------------------- |
-| `value`  | `string` | Formatted value (same as `event.target.value`). |
-| `number` | `number` | The number used for formatting.                 |
-
-By itself, the `input-number-format` event can completely replace the `change` event, but you should not use it if it is not necessary, since the `input-number-format` event is called asynchronously after the `change` event has completed, which may lead to additional rendering of the component. Consider the `input-number-format` event as an optional feature, not a required feature.
-
-> You can use both the `input-number-format` event and the `change` event to save the state, however, if you don't need additional parameters in the `detail` property, prefer the `change` event.
-
-An example of using the `input-number-format` event:
-
-```tsx
-import { useState } from 'react';
-
-import { InputNumberFormat, type NumberFormatEventDetail } from '@react-input/number-format';
-
-export default function App() {
-  const [detail, setDetail] = useState<NumberFormatEventDetail | null>(null);
-
-  return <InputNumberFormat value={detail?.value ?? ''} onNumberFormat={(event) => setDetail(event.detail)} />;
-}
-```
-
 ## Integration with custom components
@@ -294,23 +311,4 @@
 
-The `@react-input/number-format` package is written in [TypeScript](https://www.typescriptlang.org/), so you have full type support out of the box. In addition, you can import the types you need for your use:
+The `@react-input/number-format` package is written in [TypeScript](https://www.typescriptlang.org/), so you have full type support out of the box. Additionally, you can import the types you need via `@react-input/number-format` or `@react-input/number-format/types`.
 
-```tsx
-import { useState } from 'react';
-
-import { InputNumberFormat } from '@react-input/number-format';
-
-import type { NumberFormatEventDetail, NumberFormatEvent, NumberFormatEventHandler } from '@react-input/number-format';
-
-export default function App() {
-  const [detail, setDetail] = useState<NumberFormatEventDetail | null>(null);
-
-  // Or `event: NumberFormatEvent`
-  const handleNumberFormat: NumberFormatEventHandler = (event) => {
-    setDetail(event.detail);
-  };
-
-  return <InputNumberFormat onNumberFormat={handleNumberFormat} />;
-}
-```
-
 ### Property type support
@@ -323,3 +321,3 @@
 ```tsx
-import { InputNumberFormat, type InputNumberFormatProps, type NumberFormatProps } from '@react-input/number-format';
+import { InputNumberFormat, type InputNumberFormatProps, type NumberFormatOptions } from '@react-input/number-format';
 
@@ -329,3 +327,3 @@ export default function App() {
   // `InputNumberFormat` returns an `input` element and takes the type:
-  // `NumberFormatProps & React.InputHTMLAttributes<HTMLInputElement>` (the same as `InputNumberFormatProps`)
+  // `NumberFormatOptions & { locales?: Intl.LocalesArgument } & React.InputHTMLAttributes<HTMLInputElement>` (the same as `InputNumberFormatProps`)
   return <InputNumberFormat />;
@@ -336,3 +334,3 @@ }
 ```tsx
-import { InputNumberFormat, type InputNumberFormatProps, type NumberFormatProps } from '@react-input/number-format';
+import { InputNumberFormat, type InputNumberFormatProps, type NumberFormatOptions } from '@react-input/number-format';
 
@@ -344,3 +342,3 @@ import { CustomInput, type CustomInputProps } from './CustomInput';
   // `InputNumberFormat` returns the CustomInput component and takes the type:
-  // `NumberFormatProps & CustomInputProps` (the same as `InputNumberFormatProps<typeof CustomInput>`)
+  // `NumberFormatOptions & { locales?: Intl.LocalesArgument } & CustomInputProps` (the same as `InputNumberFormatProps<typeof CustomInput>`)
   return <InputNumberFormat component={CustomInput} />;
@@ -368,6 +366,2 @@ }
 
-Because each input performs the necessary calculations to set the formatting of the value, you need to set a delay between character inputs when testing the input in your application, otherwise the test may not succeed due to the necessary changes between inputs not taking effect.
-
-The recommended delay time is 15 milliseconds, however, you may need to set a different time, which can be found experimentally.
-
 ## Utils
@@ -377,2 +371,14 @@
 
+You can use utilities by importing them from the package or calling them from an instance of the `NumberFormat` class. With the second option, you don't need to pass parameters to the methods, as shown in the examples below, for example when using with a CDN:
+
+```ts
+const numberFormat = new ReactInput.NumberFormat({
+  locales: 'en-IN',
+  format: 'currency',
+  currency: 'USD',
+});
+
+numberFormat.unformat('$1,23,456.78'); // returns: "123456.78"
+```
+
 ### `format`
@@ -406,2 +412,55 @@
 
+## Migration to v2
+
+If you are upgrading from version 1 to version 2, there are a number of important changes you need to take into account.
+
+### onNumberFormat
+
+The `input-number-format` event and `onNumberFormat` method are no longer available in newer versions, focusing work on only using React's own events and methods such as `onChange`, since the `input-number-format` event and `onNumberFormat` method cannot be explicitly coordinated with React's events and methods, making such usage and event firing order non-obvious.
+
+Thus, you should use `onChange` instead of the `onNumberFormat` method.
+
+Additionally, if you are referencing data in the `detail` property of the `onNumberFormat` event object, you should use the utilities described in the [`Utils`](https://github.com/GoncharukOrg/react-input/tree/main/packages/number-format#utils) section instead, for example:
+
+instead of
+
+```tsx
+import { InputNumberFormat } from '@react-input/number-format';
+
+// ...
+
+const locales = 'en';
+
+return (
+  <InputNumberFormat
+    locales={locales}
+    onNumberFormat={(event) => {
+      const { value, number } = event.detail;
+    }}
+  />
+);
+```
+
+use
+
+```tsx
+import { InputNumberFormat, unformat } from '@react-input/number-format';
+
+// ...
+
+const locales = 'en';
+
+return (
+  <InputNumberFormat
+    locales={locales}
+    onChange={(event) => {
+      const value = event.target.value;
+      const number = Number(unformat(value, locales));
+    }}
+  />
+);
+```
+
+For more information on using utilities, see [`Utils`](https://github.com/GoncharukOrg/react-input/tree/main/packages/number-format#utils).
+
 ## Other packages from `@react-input`
@@ -408,0 +467,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 2 instances in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 2 instances in 1 package

Improved metrics

Total package byte prevSize

91280

increased by37.97%

Number of package files

22

increased by22.22%

Lines of code

281

increased by54.4%

Number of lines in readme file

468

increased by14.43%

Worsened metrics

Number of low quality alerts

4

increased by33.33%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Added@react-input/core@2.0.1(transitive)

• - Removed@react-input/core@1.0.19(transitive)

• Updated@react-input/core@^2.0.0