); }; export NumberTickerDemo; `,__src__:"registry/components/example/number-ticker-demo.tsx",__event__:"copy_usage_code",children:(0,l.jsxs)(e.code,{"data-language":"tsx","data-theme":"default",children:[(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"import"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" NumberTicker "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"from"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"@/components/shinyui/number-ticker"'}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:";"})]}),` `,(0,l.jsx)(e.span,{className:"line",children:" "}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"const"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"NumberTickerDemo"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" () "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"=>"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"return"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" ("})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#85E89D"},children:"p"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"className"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"whitespace-pre-wrap text-8xl font-medium tracking-tighter text-black dark:text-white"'}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"NumberTicker"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"value"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"{"}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"100"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"} />"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" );"})}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"};"})}),` `,(0,l.jsx)(e.span,{className:"line",children:" "}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"export"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" NumberTickerDemo;"})]})]})})})}),` `,(0,l.jsxs)(e.h2,{id:"installation",children:[(0,l.jsx)(e.a,{className:"anchor","aria-label":"Link to section",href:"#installation",children:(0,l.jsx)(e.span,{className:"icon icon-link"})}),"Installation"]}),` `,(0,l.jsxs)(E,{defaultValue:"cli",children:[(0,l.jsxs)(h,{children:[(0,l.jsx)(t,{value:"cli",children:"CLI"}),(0,l.jsx)(t,{value:"manual",children:"Manual"})]}),(0,l.jsx)(i,{value:"cli",children:(0,l.jsx)(e.div,{"data-rehype-pretty-code-fragment":"",children:(0,l.jsx)(e.pre,{"data-language":"bash","data-theme":"default",__rawString__:`coming soon `,children:(0,l.jsx)(e.code,{"data-language":"bash","data-theme":"default",children:(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"coming"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:"soon"})]})})})})}),(0,l.jsx)(i,{value:"manual",children:(0,l.jsxs)(d,{children:[(0,l.jsx)(r,{children:"Copy and paste the following code into your project."}),(0,l.jsx)(o,{name:"number-ticker",children:(0,l.jsx)(e.div,{"data-rehype-pretty-code-fragment":"",children:(0,l.jsx)(e.pre,{"data-language":"tsx","data-theme":"default",__rawString__:`"use client"; import { useEffect, useRef } from "react"; import { useInView, useMotionValue, useSpring } from "framer-motion"; import { cn } from "@/lib/utils"; export default function NumberTicker({ value, direction = "up", delay = 0, className, }: { value: number; direction?: "up" | "down"; className?: string; delay?: number; // delay in s }) { const ref = useRef(null); const motionValue = useMotionValue(direction === "down" ? value : 0); const springValue = useSpring(motionValue, { damping: 60, stiffness: 100, }); const isInView = useInView(ref, { once: true, margin: "0px" }); useEffect(() => { isInView && setTimeout(() => { motionValue.set(direction === "down" ? 0 : value); }, delay * 1000); }, [motionValue, isInView, delay, value, direction]); useEffect( () => springValue.on("change", (latest) => { if (ref.current) { ref.current.textContent = Intl.NumberFormat("en-US").format( Number(latest.toFixed(0)) ); } }), [springValue] ); return ( ); } `,__src__:"registry/components/shinyui/number-ticker.tsx",__event__:"copy_source_code",children:(0,l.jsxs)(e.code,{"data-language":"tsx","data-theme":"default",children:[(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"use client"'}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:";"})]}),` `,(0,l.jsx)(e.span,{className:"line",children:" "}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"import"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" { useEffect, useRef } "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"from"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"react"'}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:";"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"import"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" { useInView, useMotionValue, useSpring } "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"from"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"framer-motion"'}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:";"})]}),` `,(0,l.jsx)(e.span,{className:"line",children:" "}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"import"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" { cn } "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"from"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"@/lib/utils"'}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:";"})]}),` `,(0,l.jsx)(e.span,{className:"line",children:" "}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"export"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"default"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"function"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"NumberTicker"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"({"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#FFAB70"},children:"value"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#FFAB70"},children:"direction"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"up"'}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#FFAB70"},children:"delay"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"0"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#FFAB70"},children:"className"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"}"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:":"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#FFAB70"},children:"value"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:":"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"number"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:";"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#FFAB70"},children:"direction"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"?:"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"up"'}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"|"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"down"'}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:";"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#FFAB70"},children:"className"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"?:"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"string"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:";"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#FFAB70"},children:"delay"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"?:"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"number"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"; "}),(0,l.jsx)(e.span,{style:{color:"#6A737D"},children:"// delay in s"})]}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"}) {"})}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"const"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"ref"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"useRef"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"<"}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"HTMLSpanElement"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:">("}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"null"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:");"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"const"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"motionValue"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"useMotionValue"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"(direction "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"==="}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"down"'}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"?"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" value "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:":"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"0"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:");"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"const"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"springValue"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"useSpring"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"(motionValue, {"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" damping: "}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"60"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" stiffness: "}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"100"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" });"})}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"const"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"isInView"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"useInView"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"(ref, { once: "}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"true"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:", margin: "}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"0px"'}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" });"})]}),` `,(0,l.jsx)(e.span,{className:"line",children:" "}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"useEffect"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"(() "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"=>"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" isInView "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"&&"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"setTimeout"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"(() "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"=>"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" motionValue."}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"set"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"(direction "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"==="}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"down"'}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"?"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"0"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:":"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" value);"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" }, delay "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"*"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"1000"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:");"})]}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" }, [motionValue, isInView, delay, value, direction]);"})}),` `,(0,l.jsx)(e.span,{className:"line",children:" "}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"useEffect"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"("})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" () "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"=>"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" springValue."}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"on"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"("}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"change"'}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:", ("}),(0,l.jsx)(e.span,{style:{color:"#FFAB70"},children:"latest"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:") "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"=>"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"if"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" (ref.current) {"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" ref.current.textContent "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" Intl."}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"NumberFormat"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"("}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"en-US"'}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:")."}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"format"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"("})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"Number"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"(latest."}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"toFixed"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"("}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"0"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"))"})]}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" );"})}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" }"})}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" }),"})}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" [springValue]"})}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" );"})}),` `,(0,l.jsx)(e.span,{className:"line",children:" "}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"return"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" ("})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#85E89D"},children:"span"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"className"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"{"}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"cn"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"("})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"inline-block tabular-nums text-black dark:text-white tracking-wider"'}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" className"})}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" )}"})}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"ref"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"{ref}"})]}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" />"})}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" );"})}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"}"})})]})})})}),(0,l.jsx)(r,{children:"Update the import paths to match your project setup."})]})})]}),` `,(0,l.jsxs)(e.h2,{id:"props",children:[(0,l.jsx)(e.a,{className:"anchor","aria-label":"Link to section",href:"#props",children:(0,l.jsx)(e.span,{className:"icon icon-link"})}),"Props"]}),` `,(0,l.jsxs)(e.table,{children:[(0,l.jsx)(e.thead,{children:(0,l.jsxs)(e.tr,{children:[(0,l.jsx)(e.th,{children:"Prop"}),(0,l.jsx)(e.th,{children:"Type"}),(0,l.jsx)(e.th,{children:"Description"}),(0,l.jsx)(e.th,{children:"Default"})]})}),(0,l.jsxs)(e.tbody,{children:[(0,l.jsxs)(e.tr,{children:[(0,l.jsx)(e.td,{children:"value"}),(0,l.jsx)(e.td,{children:"int"}),(0,l.jsx)(e.td,{children:"The value to count to"}),(0,l.jsx)(e.td,{children:"0"})]}),(0,l.jsxs)(e.tr,{children:[(0,l.jsx)(e.td,{children:"direction"}),(0,l.jsx)(e.td,{children:"up | down"}),(0,l.jsx)(e.td,{children:"The direction to count in"}),(0,l.jsx)(e.td,{children:"up"})]}),(0,l.jsxs)(e.tr,{children:[(0,l.jsx)(e.td,{children:"delay"}),(0,l.jsx)(e.td,{children:"number"}),(0,l.jsx)(e.td,{children:"The delay in seconds"}),(0,l.jsx)(e.td,{children:"0"})]}),(0,l.jsxs)(e.tr,{children:[(0,l.jsx)(e.td,{children:"className"}),(0,l.jsx)(e.td,{children:"string"}),(0,l.jsx)(e.td,{children:"The class name to be applied to the component"}),(0,l.jsx)(e.td,{children:'""'})]})]})]})]})}function F(n={}){let{wrapper:e}=n.components||{};return e?(0,l.jsx)(e,{...n,children:(0,l.jsx)(u,{...n})}):u(n)}function c(n,e){throw new Error("Expected "+(e?"component":"object")+" `"+n+"` to be defined: you likely forgot to import, pass, or provide it.")}return k(V);})(); ;return Component;

Prop	Type	Description	Default
value	int	The value to count to	0
direction	up \| down	The direction to count in	up
delay	number	The delay in seconds	0
className	string	The class name to be applied to the component	""

Number Ticker

Installation

Props