num-beauty/dist/react/index.js

An ultra lightweight module for formatting numbers into human-friendly strings

import React,{useMemo}from"react";import{beautifyToParts}from"../services/parts.service";export function useNumBeauty(e,a={}){return{formatted:useMemo(()=>beautifyToParts(e,a).map(e=>e.value).join(""),[e,a]),parts:useMemo(()=>beautifyToParts(e,a),[e,a])}}export function NumDisplay({value:e,className:a,style:t,styled:s=!1,renderPart:r,ariaLabel:l,as:m="span",...u}){const{formatted:c,parts:o}=useNumBeauty(e,u);return s?React.createElement(m,{className:a,style:t,"aria-label":l,role:"text"},o.map((e,a)=>r?r(e,a):React.createElement("span",{key:a,className:`num-${e.type}`},e.value))):React.createElement(m,{className:a,style:t,"aria-label":l},c)}export function NumParts({value:e,children:a,className:t,style:s,as:r="span",...l}){const{parts:m}=useNumBeauty(e,l);return React.createElement(r,{className:t,style:s,role:"text"},m.map((e,t)=>a(e,t)))}