react-spinning-number/dist/components/digit.js

<img src="./example/example.gif" width="100%">

import { jsx as n, jsxs as D } from "react/jsx-runtime";
import { useRef as g, useState as c, useEffect as u } from "react";
function v({
  char: t,
  delay: l,
  loaded: d,
  className: e,
  style: p,
  fontSize: i = 1,
  duration: o = 300
}) {
  const r = g(null), [m, f] = c(0), [h, $] = c(t), s = {
    ...p,
    lineHeight: 1,
    margin: 0,
    fontSize: `${i}rem`,
    whiteSpace: "pre"
  };
  return u(() => {
    var a;
    r.current && f((a = r.current) == null ? void 0 : a.getBoundingClientRect().width);
  }, [r, i, t, p]), u(() => {
    t === null && f(0);
  }, [t]), u(() => {
    t !== null && $(t);
  }, [t]), t === null ? /* @__PURE__ */ n(
    "span",
    {
      "aria-hidden": "true",
      style: {
        width: m,
        transitionDelay: `${l}ms`,
        transitionDuration: `${o}ms`,
        overflow: "hidden",
        transitionProperty: d ? "all" : "none"
      },
      children: /* @__PURE__ */ n("span", { "aria-hidden": "true", style: s, className: e, children: h })
    }
  ) : /^\d+$/.test(t) ? /* @__PURE__ */ D(
    "span",
    {
      style: {
        height: `${i}rem`,
        position: "relative",
        display: "flex",
        flexDirection: "column",
        justifyContent: "start",
        alignItems: "start",
        overflow: "hidden"
      },
      "aria-hidden": "true",
      children: [
        /* @__PURE__ */ n(
          "span",
          {
            style: {
              width: m,
              transitionDelay: `${l}ms`,
              transitionDuration: `${o}ms`,
              transitionProperty: d ? "all" : "none"
            },
            children: /* @__PURE__ */ n(
              "span",
              {
                ref: r,
                style: {
                  ...s,
                  display: "inline-block",
                  opacity: 0
                },
                "aria-hidden": "true",
                className: e || "",
                children: t
              }
            )
          }
        ),
        /* @__PURE__ */ n(
          "span",
          {
            "aria-hidden": "true",
            style: {
              position: "absolute",
              display: "flex",
              flexDirection: "column",
              alignItems: "start",
              transform: `translateY(${Number(t) * -1 * i}rem)`,
              transitionDelay: `${l}ms`,
              transitionDuration: `${o}ms`,
              transitionProperty: "transform"
            },
            children: new Array(10).fill(null).map((a, y) => /* @__PURE__ */ n("span", { style: s, className: e, children: y }, y))
          }
        )
      ]
    }
  ) : /* @__PURE__ */ n("span", { "aria-hidden": "true", style: s, className: e, children: t });
}
export {
  v as Digit
};