{"library":"react-countup","title":"React CountUp","description":"react-countup is a React component that provides an easy-to-use wrapper around the CountUp.js library, enabling numerical value animations within React applications. As of version 6.5.3, the library is actively maintained, with frequent patch and minor releases primarily focused on dependency updates, bug fixes, and incorporating new features from the underlying countup.js library, such as `useIndianSeparators` and scroll spy enhancements. It offers both a declarative component API (<CountUp />), a flexible render prop pattern, and a `useCountUp` hook for more fine-grained imperative control over the animation instance. Key differentiators include its robust API for controlling animation duration, delay, decimal and grouping separators, prefixes/suffixes, easing functions, and scroll-triggered animations, abstracting away the direct CountUp.js instance management. It also ships with TypeScript types, enhancing developer experience in typed projects.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install react-countup"],"cli":null},"imports":["import { CountUp } from 'react-countup'","import { useCountUp } from 'react-countup'","import type { CountUpProps } from 'react-countup'"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import React, { useState } from 'react';\nimport { CountUp, useCountUp } from 'react-countup';\n\nconst App: React.FC = () => {\n  const [dynamicValue, setDynamicValue] = useState(500);\n\n  // Example using the useCountUp hook for imperative control\n  const { countUp, start, pauseResume, reset, update } = useCountUp({\n    start: 0,\n    end: 100,\n    delay: 1000,\n    duration: 5,\n    onStart: () => console.log('Hook animation started!'),\n    onEnd: () => console.log('Hook animation ended!'),\n  });\n\n  return (\n    <div>\n      <h1>React CountUp Examples</h1>\n\n      <h2>Simple Component:</h2>\n      <CountUp\n        start={0}\n        end={2024}\n        duration={3}\n        delay={0.5}\n        prefix=\"Year: \"\n        suffix=\"!\"\n        separator=\",\"\n        decimals={0}\n        useEasing={true}\n        onEnd={() => console.log('Component animation finished!')}\n      />\n      <br /><br />\n\n      <h2>Render Prop Example:</h2>\n      <CountUp start={500} end={1000} duration={2} delay={1} useGrouping={false}>\n        {({ countUpRef, start: renderPropStart }) => (\n          <div>\n            <span ref={countUpRef} />\n            <button onClick={renderPropStart}>Start Render Prop</button>\n          </div>\n        )}\n      </CountUp>\n      <br /><br />\n\n      <h2>Hook (Imperative Control):</h2>\n      <div>\n        <p>Current Hook Value: {countUp}</p>\n        <button onClick={start}>Start Hook</button>\n        <button onClick={pauseResume}>Pause/Resume Hook</button>\n        <button onClick={reset}>Reset Hook</button>\n        <button onClick={() => update(Math.random() * 500 + 100)}>Update Hook</button>\n      </div>\n      <br /><br />\n\n      <h2>Dynamic Value with 'redraw' prop:</h2>\n      <button onClick={() => setDynamicValue(Math.floor(Math.random() * 1000))}>\n        Change Value to: {dynamicValue}\n      </button>\n      <br />\n      <CountUp\n        start={0}\n        end={dynamicValue}\n        duration={2}\n        redraw={true}\n        className=\"dynamic-counter\"\n      />\n    </div>\n  );\n};\n\nexport default App;","lang":"typescript","description":"Demonstrates the primary ways to use react-countup: as a simple component, with a render prop for manual control, and using the `useCountUp` hook for imperative animation management, including handling dynamic `end` values with the `redraw` prop.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}