https://github.com/dcollien/react-decimal-expansion
A repeating/recurring decimal component for React
https://github.com/dcollien/react-decimal-expansion
decimal decimal-expansion fraction number-format react react-component reactjs recurring-decimals repeating-decimals
Last synced: 7 months ago
JSON representation
A repeating/recurring decimal component for React
- Host: GitHub
- URL: https://github.com/dcollien/react-decimal-expansion
- Owner: dcollien
- Created: 2025-03-11T10:05:05.000Z (7 months ago)
- Default Branch: main
- Last Pushed: 2025-03-11T14:11:12.000Z (7 months ago)
- Last Synced: 2025-03-11T14:43:44.209Z (7 months ago)
- Topics: decimal, decimal-expansion, fraction, number-format, react, react-component, reactjs, recurring-decimals, repeating-decimals
- Language: TypeScript
- Homepage: https://dcollien.github.io/react-decimal-expansion/
- Size: 38.1 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Decimal Expansion with Recurring Decimals
`npm install react-decimal-expansion`
`pnpm add react-decimal-expansion`
`yarn add react-decimal-expansion`
```tsx
import { DecimalExpansion } from "react-decimal-expansion";
...
```
Renders an internationalized locale-formatted [recurring/repeating decimal](https://en.wikipedia.org/wiki/Repeating_decimal) of the given rational.
Supporting:
- Vinculum for US/Canada, India and select European countries
- Dots for UK, Australia, New Zealand, People's Republic of China, and select Middle Eastern and South-east Asian countries
- Parentheses for other parts of Europe / Scandinavian countries, Vietnam and Israel
- Arc for Spain and Latin America
- Ellipsis as another option
- Rounded as yet another display option
The `options` prop supports:
```tsx
{
// Specifying the region or locale tag, otherwise the navigator.language will be used
tag?: Intl.UnicodeBCP47LocaleIdentifier | Intl.Locale;
// Specifying the format to use for recurring decimals, otherwise inferred from the locale
format?: "vinculum" | "dots" | "parentheses" | "arc" | "ellipsis" | "rounded";
// Number format options, same as using:
// new Intl.NumberFormat(locale, formatOptions).format(...)
formatOptions?: Intl.NumberFormatOptions;
// If using the "rounded" format, how to round
rounding?: {
method?: "round" | "floor" | "ceil";
digits?: number;
renderRounded?: React.FC;
renderExact?: React.FC;
};
// Custom renderers for recurring parts
renderRecurring?: Record<
"vinculum" | "dots" | "parentheses" | "arc" | "ellipsis" | "rounded",
React.FC
>;
}
```
## Demo
`pnpm run dev` to run the demo app.
## Corrections
Let me know via Github Issue if there's any regions that have the wrong format, and we'll update the list.