{"id":17436268,"url":"https://github.com/carmhack/react-format-kit","last_synced_at":"2025-11-08T05:03:20.920Z","repository":{"id":257820561,"uuid":"870058567","full_name":"carmhack/react-format-kit","owner":"carmhack","description":"A TypeScript-based React component for formatting various data types such as dates, numbers, currencies and units with support for multiple formats and localization.","archived":false,"fork":false,"pushed_at":"2024-10-10T15:09:23.000Z","size":65,"stargazers_count":7,"open_issues_count":0,"forks_count":0,"subscribers_count":4,"default_branch":"main","last_synced_at":"2025-02-07T15:38:55.068Z","etag":null,"topics":["components","currencies","date","formatting","i18n","internationalization","numbers","react","typescript","units"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/carmhack.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-10-09T11:20:50.000Z","updated_at":"2024-10-15T14:42:14.000Z","dependencies_parsed_at":null,"dependency_job_id":"bdcedbd3-b0dc-40b0-9326-ace3318e13f5","html_url":"https://github.com/carmhack/react-format-kit","commit_stats":null,"previous_names":["carmhack/react-format-kit"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/carmhack%2Freact-format-kit","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/carmhack%2Freact-format-kit/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/carmhack%2Freact-format-kit/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/carmhack%2Freact-format-kit/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/carmhack","download_url":"https://codeload.github.com/carmhack/react-format-kit/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":240347944,"owners_count":19787236,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["components","currencies","date","formatting","i18n","internationalization","numbers","react","typescript","units"],"created_at":"2024-10-17T10:07:56.641Z","updated_at":"2025-11-08T05:03:20.861Z","avatar_url":"https://github.com/carmhack.png","language":"TypeScript","readme":"# React Format Kit\nA 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.\n\nPackage: [Go to npm](https://www.npmjs.com/package/react-format-kit)\n\n## Features\n\n- 📅 **Date Formatting**: Supports multiple date formats (ISO, numeric, month, day, human-readable).\n- 💰 **Number Formatting**: Easily format numbers, percentages and currencies.\n- 📏 **Unit Formatting**: (TODO) Format units of measure such as meters, kilometers, and more.\n- 🌍 **Localization**: Full locale support using the `Intl` API for internationalized applications.\n- 🔧 **TypeScript**: Written in TypeScript with full type declarations, providing autocompletion and type safety.\n- 📊 **Expandable**: Designed to be expanded with additional formatting components in the future.\n\n\n## Installation\nTo install, simply run the following command:\n\n```bash\nnpm i react-format-kit\n```\n\n## Examples\n### Format Date\n\nThe `FormatDate` component returns a time tag with formatted date.  \nThe `date` prop must be a string that Date.parse() can interpret or a Date object.  \nThe `format` prop can be one of those values: iso, numeric, human or human-long.  \nIf `locale` is not passed, `navigator.language` is used or, if it is not specified, the 'en-US' locale is used.\n\n\n```tsx\nimport React from 'react';\nimport { FormatDate } from 'react-format-kit';\n\nconst App = () =\u003e (\n  \u003cdiv\u003e\n    {/* Human-readable format: current date with current locale */}\n    \u003cFormatDate format=\"human\" /\u003e\n\n    {/* Numeric format: will render 10/09/1991 */}\n    \u003cFormatDate date=\"1991-10-09T10:00:00Z\" format=\"numeric\" locale=\"en-US\" /\u003e\n\n    {/* ISO format: will render \"1991-10-09T10:00:00.000Z\" */}\n    \u003cFormatDate date=\"1991-10-09T10:00:00Z\" format=\"iso\" /\u003e\n  \u003c/div\u003e\n);\n```\n\nThe `FormatDate` component accepts the following props:\n\n| Prop      | Type   | Default   | Description   |\n|-----------|---------------|----------|------------|\n| `date` | `Date` or `string` | `new Date()` | The date to format. |\n| `format` | `iso \\ numeric \\ month \\ day \\ human \\ human-long` | `human`| The format to display the date. |\n| `locale` | `string` | navigator.language OR `'en-US'` | The locale to use for formatting the date.  |\n\n### Format Number\n\nThe `FormatNumber` component returns a span tag with formatted number.  \nThe `minimumFractionDigits` and `maximumFractionDigits` are set to default value of 0.  \nIf `locale` is not passed, `navigator.language` is used or, if it is not specified, the 'en-US' locale is used.\n\n\n```tsx\nimport React from 'react';\nimport { FormatNumber } from 'react-format-kit';\n\nconst App = () =\u003e (\n  \u003cdiv\u003e\n    {/* Will render 10,000 */}\n    \u003cFormatNumber value={10000} locale='en-US' /\u003e\n\n    {/* Will render 10.000 */}\n    \u003cFormatNumber value={10000} locale='it-IT' /\u003e\n\n    {/* Will render 10.000,98 */}\n    \u003cFormatNumber value={10000.98} minimumFractionDigits={1} maximumFractionDigits={2} locale='it-IT' /\u003e\n  \u003c/div\u003e\n);\n```\n\nThe `FormatNumber` component accepts the following props:\n\n| Prop      | Type   | Default   | Description   |\n|-----------|---------------|----------|------------|\n| `value` | `number` | required | The number to format. |\n| `minimumFractionDigits` | `number` | 0 | The minimum fraction digits to display. |\n| `maximumFractionDigits` | `number` | 0 | The maximum fraction digits to display. |\n| `locale` | `string` | navigator.language OR `'en-US'` | The locale to use for formatting the date (e.g., `'en-US'`, `'fr-FR'`).  |\n\n### Format Currency\n\nThe `FormatCurrency` component returns a span tag with formatted number.  \nThe `currency` will be to default USD if not specified. Must be a valid currency in ISO 4217 list.  \nThe `minimumFractionDigits` and `maximumFractionDigits` are set to default value of 0.  \nIf `locale` is not passed, `navigator.language` is used or, if it is not specified, the 'en-US' locale is used.\n\n\n```tsx\nimport React from 'react';\nimport { FormatCurrency } from 'react-format-kit';\n\nconst App = () =\u003e (\n  \u003cdiv\u003e\n    {/* Will render €10,000 */}\n    \u003cFormatCurrency value={10000} currency='EUR' locale='en-US' /\u003e\n\n    {/* Will render 10.000 € */}\n    \u003cFormatCurrency value={10000} currency='EUR' /\u003e\n  \u003c/div\u003e\n);\n```\n\nThe `FormatCurrency` component accepts the following props:\n\n| Prop      | Type   | Default   | Description   |\n|-----------|---------------|----------|------------|\n| `value` | `number` | required | The number to format. |\n| `currency` | `string` | USD | Currency |\n| `minimumFractionDigits` | `number` | 0 | The minimum fraction digits to display. |\n| `maximumFractionDigits` | `number` | 0 | The maximum fraction digits to display. |\n| `locale` | `string` | navigator.language OR `'en-US'` | The locale to use for formatting the date (e.g., `'en-US'`, `'fr-FR'`).  |\n\n### Format Percentage\n\nThe `FormatPercentage` component returns a span tag with formatted number.  \nThe `value` must be a number that needs to be multiplied by 100 (e.g. 0.75 instead of 75).  \nThe `minimumFractionDigits` and `maximumFractionDigits` are set to default value of 0.  \nIf `locale` is not passed, `navigator.language` is used or, if it is not specified, the 'en-US' locale is used.\n\n\n```tsx\nimport React from 'react';\nimport { FormatPercentage } from 'react-format-kit';\n\nconst App = () =\u003e (\n  \u003cdiv\u003e\n    {/* Will render 2.275% */}\n    \u003cFormatPercentage value={22.75} /\u003e\n\n    {/* Will render 2,275% */}\n    \u003cFormatPercentage value={22.75} locale='en-US' /\u003e\n  \u003c/div\u003e\n);\n```\n\nThe `FormatPercentage` component accepts the following props:\n\n| Prop      | Type   | Default   | Description   |\n|-----------|---------------|----------|------------|\n| `value` | `number` | required | The number to format. |\n| `minimumFractionDigits` | `number` | 0 | The minimum fraction digits to display. |\n| `maximumFractionDigits` | `number` | 0 | The maximum fraction digits to display. |\n| `locale` | `string` | navigator.language OR `'en-US'` | The locale to use for formatting the date (e.g., `'en-US'`, `'fr-FR'`).  |\n\n## Contributing\nContributions are welcome! Feel free to open an issue or submit a pull request on GitHub.\n\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcarmhack%2Freact-format-kit","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcarmhack%2Freact-format-kit","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcarmhack%2Freact-format-kit/lists"}