@arolariu/components/dist/cjs/components/ui/counting-number.cjs.map

A collection of reusable components for React applications, built as ESM & CJS modules with tree shake, minify and bundler optimizations enabled, for the lowest bundle size (import cost)! 😍

{"version":3,"file":"components\\ui\\counting-number.cjs","sources":["webpack://@arolariu/components/./src/components/ui/counting-number.tsx"],"sourcesContent":["\n\nimport * as React from \"react\";\nimport {\n  type SpringOptions,\n  type UseInViewOptions,\n  useInView,\n  useMotionValue,\n  useSpring,\n} from \"motion/react\";\n\ninterface CountingNumberProps extends React.HTMLAttributes<HTMLSpanElement> {\n  number: number;\n  fromNumber?: number;\n  padStart?: boolean;\n  inView?: boolean;\n  inViewMargin?: UseInViewOptions[\"margin\"];\n  inViewOnce?: boolean;\n  decimalSeparator?: string;\n  transition?: SpringOptions;\n  decimalPlaces?: number;\n}\n\nconst CountingNumber = React.forwardRef<HTMLSpanElement, CountingNumberProps>(\n  (\n    {\n      number,\n      fromNumber = 0,\n      padStart = false,\n      inView = false,\n      inViewMargin = \"0px\",\n      inViewOnce = true,\n      decimalSeparator = \".\",\n      transition = { stiffness: 90, damping: 50 },\n      decimalPlaces = 0,\n      className,\n      ...props\n    },\n    ref\n  ) => {\n    const localRef = React.useRef<HTMLSpanElement>(null);\n    React.useImperativeHandle(ref, () => localRef.current as HTMLSpanElement);\n\n    const numberStr = number.toString();\n    const decimals =\n      typeof decimalPlaces === \"number\"\n        ? decimalPlaces\n        : numberStr.includes(\".\")\n        ? numberStr.split(\".\")[1].length\n        : 0;\n\n    const motionVal = useMotionValue(fromNumber);\n    const springVal = useSpring(motionVal, transition);\n    const inViewResult = useInView(localRef, {\n      once: inViewOnce,\n      margin: inViewMargin,\n    });\n    const isInView = !inView || inViewResult;\n\n    React.useEffect(() => {\n      if (isInView) motionVal.set(number);\n    }, [isInView, number, motionVal]);\n\n    React.useEffect(() => {\n      const unsubscribe = springVal.on(\"change\", (latest) => {\n        if (localRef.current) {\n          let formatted =\n            decimals > 0\n              ? latest.toFixed(decimals)\n              : Math.round(latest).toString();\n\n          if (decimals > 0) {\n            formatted = formatted.replace(\".\", decimalSeparator);\n          }\n\n          if (padStart) {\n            const finalIntLength = Math.floor(Math.abs(number)).toString()\n              .length;\n            const [intPart, fracPart] = formatted.split(decimalSeparator);\n            const paddedInt = intPart.padStart(finalIntLength, \"0\");\n            formatted = fracPart\n              ? `${paddedInt}${decimalSeparator}${fracPart}`\n              : paddedInt;\n          }\n\n          localRef.current.textContent = formatted;\n        }\n      });\n      return () => unsubscribe();\n    }, [springVal, decimals, padStart, number, decimalSeparator]);\n\n    const finalIntLength = Math.floor(Math.abs(number)).toString().length;\n    const initialText = padStart\n      ? \"0\".padStart(finalIntLength, \"0\") +\n        (decimals > 0 ? decimalSeparator + \"0\".repeat(decimals) : \"\")\n      : \"0\" + (decimals > 0 ? decimalSeparator + \"0\".repeat(decimals) : \"\");\n\n    return (\n      <span ref={localRef} className={className} {...props}>\n        {initialText}\n      </span>\n    );\n  }\n);\n\nCountingNumber.displayName = \"CountingNumber\";\n\nexport { CountingNumber, type CountingNumberProps };\n"],"names":["CountingNumber","React","number","fromNumber","padStart","inView","inViewMargin","inViewOnce","decimalSeparator","transition","decimalPlaces","className","props","ref","localRef","numberStr","decimals","motionVal","useMotionValue","springVal","useSpring","inViewResult","useInView","isInView","unsubscribe","latest","formatted","Math","finalIntLength","intPart","fracPart","paddedInt","initialText"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuBA,MAAMA,iBAAiB,WAAjBA,GAAiBC,+BAAAA,UAAgB,CACrC,CACE,EACEC,MAAM,EACNC,aAAa,CAAC,EACdC,WAAW,KAAK,EAChBC,SAAS,KAAK,EACdC,eAAe,KAAK,EACpBC,aAAa,IAAI,EACjBC,mBAAmB,GAAG,EACtBC,aAAa;IAAE,WAAW;IAAI,SAAS;AAAG,CAAC,EAC3CC,gBAAgB,CAAC,EACjBC,SAAS,EACT,GAAGC,OACJ,EACDC;IAEA,MAAMC,WAAWb,+BAAAA,MAAY,CAAkB;IAC/CA,+BAAAA,mBAAyB,CAACY,KAAK,IAAMC,SAAS,OAAO;IAErD,MAAMC,YAAYb,OAAO,QAAQ;IACjC,MAAMc,WACJ,mBAAON,gBACHA,gBACAK,UAAU,QAAQ,CAAC,OACnBA,UAAU,KAAK,CAAC,IAAI,CAAC,EAAE,CAAC,MAAM,GAC9B;IAEN,MAAME,YAAYC,IAAAA,sBAAAA,cAAAA,EAAef;IACjC,MAAMgB,YAAYC,IAAAA,sBAAAA,SAAAA,EAAUH,WAAWR;IACvC,MAAMY,eAAeC,IAAAA,sBAAAA,SAAAA,EAAUR,UAAU;QACvC,MAAMP;QACN,QAAQD;IACV;IACA,MAAMiB,WAAW,CAAClB,UAAUgB;IAE5BpB,+BAAAA,SAAe,CAAC;QACd,IAAIsB,UAAUN,UAAU,GAAG,CAACf;IAC9B,GAAG;QAACqB;QAAUrB;QAAQe;KAAU;IAEhChB,+BAAAA,SAAe,CAAC;QACd,MAAMuB,cAAcL,UAAU,EAAE,CAAC,UAAU,CAACM;YAC1C,IAAIX,SAAS,OAAO,EAAE;gBACpB,IAAIY,YACFV,WAAW,IACPS,OAAO,OAAO,CAACT,YACfW,KAAK,KAAK,CAACF,QAAQ,QAAQ;gBAEjC,IAAIT,WAAW,GACbU,YAAYA,UAAU,OAAO,CAAC,KAAKlB;gBAGrC,IAAIJ,UAAU;oBACZ,MAAMwB,iBAAiBD,KAAK,KAAK,CAACA,KAAK,GAAG,CAACzB,SAAS,QAAQ,GACzD,MAAM;oBACT,MAAM,CAAC2B,SAASC,SAAS,GAAGJ,UAAU,KAAK,CAAClB;oBAC5C,MAAMuB,YAAYF,QAAQ,QAAQ,CAACD,gBAAgB;oBACnDF,YAAYI,WACR,GAAGC,YAAYvB,mBAAmBsB,UAAU,GAC5CC;gBACN;gBAEAjB,SAAS,OAAO,CAAC,WAAW,GAAGY;YACjC;QACF;QACA,OAAO,IAAMF;IACf,GAAG;QAACL;QAAWH;QAAUZ;QAAUF;QAAQM;KAAiB;IAE5D,MAAMoB,iBAAiBD,KAAK,KAAK,CAACA,KAAK,GAAG,CAACzB,SAAS,QAAQ,GAAG,MAAM;IACrE,MAAM8B,cAAc5B,WAChB,IAAI,QAAQ,CAACwB,gBAAgB,OAC5BZ,CAAAA,WAAW,IAAIR,mBAAmB,IAAI,MAAM,CAACQ,YAAY,EAAC,IAC3D,MAAOA,CAAAA,WAAW,IAAIR,mBAAmB,IAAI,MAAM,CAACQ,YAAY,EAAC;IAErE,OACE,WADF,GACE,qCAAC;QAAK,KAAKF;QAAU,WAAWH;QAAY,GAAGC,KAAK;kBACjDoB;;AAGP;AAGFhC,eAAe,WAAW,GAAG"}