Support some new countup features (#821)

glennreyes · Oct 31, 2023 · 151682b · 151682b
1 parent 81e5f61
commit 151682b
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 0 deletions.
diff --git a/README.md b/README.md
@@ -43,6 +43,7 @@ Click [here](https://codesandbox.io/s/github/glennreyes/react-countup/tree/maste
       - [`preserveValue: boolean`](#preservevalue-boolean)
       - [`separator: string`](#separator-string)
       - [`start: number`](#start-number)
+      - [`plugin: CountUpPlugin`](#plugin-countupplugin)
       - [`startOnMount: boolean`](#startonmount-boolean)
       - [`suffix: string`](#suffix-string)
       - [`useEasing: boolean`](#useeasing-boolean)
@@ -265,6 +266,10 @@ Initial value.
 
 Default: `0`
 
+#### `plugin: CountUpPlugin`
+
+Define plugin for alternate animations
+
 #### `startOnMount: boolean`
 
 Use for start counter on mount for hook usage.
@@ -461,6 +466,29 @@ export default function App() {
 }
 ```
 
+### Plugin usage
+
+```js
+import { CountUp } from 'countup.js';
+import { Odometer } from 'odometer_countup';
+
+export default function App() {
+  useCountUp({
+    ref: 'counter',
+    end: 1234567,
+    enableScrollSpy: true,
+    scrollSpyDelay: 1000,
+    plugin: Odometer,
+  });
+
+  return (
+    <div className="App">
+      <span id="counter" />
+    </div>
+  );
+}
+```
+
 ## License
 
 MIT
diff --git a/src/common.ts b/src/common.ts
@@ -23,6 +23,7 @@ export const createCountUpInstance = (
     enableScrollSpy,
     scrollSpyDelay,
     scrollSpyOnce,
+    plugin,
   } = props;
 
   return new CountUp(el, end, {
@@ -36,6 +37,7 @@ export const createCountUpInstance = (
     separator,
     prefix,
     suffix,
+    plugin,
     useEasing,
     useIndianSeparators,
     useGrouping,