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. Powered by the native Intl API, this library simplifies the process of displaying localized data formats across your React applications.

Package: Go to npm

Features

• 📅 Date Formatting: Supports multiple date formats (ISO, numeric, human-readable).
• 💰 Number and Currency Formatting: Easily format numbers, percentages and currencies with localization support.
• 📏 Unit Formatting: (TODO) Format units of measure such as meters, kilometers, and more.
• 🌍 Localization: Full locale support using the Intl API for internationalized applications.
• 🔧 TypeScript: Written in TypeScript with full type declarations, providing autocompletion and type safety.
• 📊 Expandable: Designed to be expanded with additional formatting components in the future.

Installation

To install, simply run the following command:

1npm i react-format-kit

Examples

Format Date

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').

Format Number

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').

Format Currency

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').

Format Percentage

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').

Contributing

Contributions are welcome! Feel free to open an issue or submit a pull request on GitHub.