Gathering detailed insights and metrics for react-format-kit
Gathering detailed insights and metrics for react-format-kit
Gathering detailed insights and metrics for react-format-kit
Gathering detailed insights and metrics for react-format-kit
A TypeScript-based React component for formatting various data types such as dates, numbers, currencies and units with support for multiple formats and localization.
npm install react-format-kit
Typescript
Module System
Node Version
NPM Version
71.4
Supply Chain
98.8
Quality
80.3
Maintenance
100
Vulnerability
100
License
TypeScript (100%)
Total Downloads
0
Last Day
0
Last Week
0
Last Month
0
Last Year
0
7 Stars
19 Commits
4 Watchers
1 Branches
1 Contributors
Updated on Oct 15, 2024
Latest Version
0.2.3
Package Id
react-format-kit@0.2.3
Unpacked Size
20.55 kB
Size
4.65 kB
File Count
24
NPM Version
10.2.4
Node Version
21.5.0
Published on
Oct 10, 2024
Cumulative downloads
Total Downloads
Last Day
0%
NaN
Compared to previous day
Last Week
0%
NaN
Compared to previous week
Last Month
0%
NaN
Compared to previous month
Last Year
0%
NaN
Compared to previous year
A TypeScript-based React component for formatting various data types such as dates, numbers, currencies and units with support for multiple formats and localization. Powered by the native Intl
API, this library simplifies the process of displaying localized data formats across your React applications.
Package: Go to npm
Intl
API for internationalized applications.To install, simply run the following command:
1npm i react-format-kit
The FormatDate
component returns a time tag with formatted date.
The date
prop must be a string that Date.parse() can interpret or a Date object.
The format
prop can be one of those values: iso, numeric, human or human-long.
If locale
is not passed, navigator.language
is used or, if it is not specified, the 'en-US' locale is used.
1import React from 'react'; 2import { FormatDate } from 'react-format-kit'; 3 4const App = () => ( 5 <div> 6 {/* Human-readable format: current date with current locale */} 7 <FormatDate format="human" /> 8 9 {/* Numeric format: will render 10/09/1991 */} 10 <FormatDate date="1991-10-09T10:00:00Z" format="numeric" locale="en-US" /> 11 12 {/* ISO format: will render "1991-10-09T10:00:00.000Z" */} 13 <FormatDate date="1991-10-09T10:00:00Z" format="iso" /> 14 </div> 15);
The FormatDate
component accepts the following props:
Prop | Type | Default | Description |
---|---|---|---|
date | Date or string | new Date() | The date to format. |
format | iso \ numeric \ human \ human-long | human | The format to display the date: ISO format, numeric, human-readable, or long human-readable format. |
locale | string | navigator.language OR 'en-US' | The locale to use for formatting the date (e.g., 'en-US' , 'fr-FR' ). |
The FormatNumber
component returns a span tag with formatted number.
The minimumFractionDigits
and maximumFractionDigits
are set to default value of 0.
If locale
is not passed, navigator.language
is used or, if it is not specified, the 'en-US' locale is used.
1import React from 'react'; 2import { FormatNumber } from 'react-format-kit'; 3 4const App = () => ( 5 <div> 6 {/* Will render 10,000 */} 7 <FormatNumber value={10000} locale='en-US' /> 8 9 {/* Will render 10.000 */} 10 <FormatNumber value={10000} locale='it-IT' /> 11 12 {/* Will render 10.000,98 */} 13 <FormatNumber value={10000.98} minimumFractionDigits={1} maximumFractionDigits={2} locale='it-IT' /> 14 </div> 15);
The FormatNumber
component accepts the following props:
Prop | Type | Default | Description |
---|---|---|---|
value | number | required | The number to format. |
minimumFractionDigits | number | 0 | The minimum fraction digits to display. |
maximumFractionDigits | number | 0 | The maximum fraction digits to display. |
locale | string | navigator.language OR 'en-US' | The locale to use for formatting the date (e.g., 'en-US' , 'fr-FR' ). |
The FormatCurrency
component returns a span tag with formatted number.
The currency
will be to default USD if not specified. Must be a valid currency in ISO 4217 list.
The minimumFractionDigits
and maximumFractionDigits
are set to default value of 0.
If locale
is not passed, navigator.language
is used or, if it is not specified, the 'en-US' locale is used.
1import React from 'react'; 2import { FormatCurrency } from 'react-format-kit'; 3 4const App = () => ( 5 <div> 6 {/* Will render €10,000 */} 7 <FormatCurrency value={10000} currency='EUR' locale='en-US' /> 8 9 {/* Will render 10.000 € */} 10 <FormatCurrency value={10000} currency='EUR' /> 11 </div> 12);
The FormatCurrency
component accepts the following props:
Prop | Type | Default | Description |
---|---|---|---|
value | number | required | The number to format. |
currency | string | USD | Currency |
minimumFractionDigits | number | 0 | The minimum fraction digits to display. |
maximumFractionDigits | number | 0 | The maximum fraction digits to display. |
locale | string | navigator.language OR 'en-US' | The locale to use for formatting the date (e.g., 'en-US' , 'fr-FR' ). |
The FormatPercentage
component returns a span tag with formatted number.
The value
must be a number that needs to be multiplied by 100 (e.g. 0.75 instead of 75).
The minimumFractionDigits
and maximumFractionDigits
are set to default value of 0.
If locale
is not passed, navigator.language
is used or, if it is not specified, the 'en-US' locale is used.
1import React from 'react'; 2import { FormatPercentage } from 'react-format-kit'; 3 4const App = () => ( 5 <div> 6 {/* Will render 2.275% */} 7 <FormatPercentage value={22.75} /> 8 9 {/* Will render 2,275% */} 10 <FormatPercentage value={22.75} locale='en-US' /> 11 </div> 12);
The FormatPercentage
component accepts the following props:
Prop | Type | Default | Description |
---|---|---|---|
value | number | required | The number to format. |
minimumFractionDigits | number | 0 | The minimum fraction digits to display. |
maximumFractionDigits | number | 0 | The maximum fraction digits to display. |
locale | string | navigator.language OR 'en-US' | The locale to use for formatting the date (e.g., 'en-US' , 'fr-FR' ). |
Contributions are welcome! Feel free to open an issue or submit a pull request on GitHub.
No vulnerabilities found.
No security vulnerabilities found.