Support plugins (#307)

* support plugins

* add plugin test

* Update README

Author: inorganik

README.md

@@ -15,6 +15,7 @@ Or tinker with CountUp in [Stackblitz](https://stackblitz.com/edit/countup-types
 - **[Usage](#usage)**
 - **[Including CountUp](#including-countup)**
 - **[Contributing](#contributing)**
+- **[Creating Animation Plugins](#creating-animation-plugins)**
 
 
 ## CountUp for frameworks and plugins:
@@ -25,7 +26,7 @@ Or tinker with CountUp in [Stackblitz](https://stackblitz.com/edit/countup-types
 - **[CountUp.js with Svelte](https://gist.github.com/inorganik/85a66941ab88cc10c5fa5b26aead5f2a)**
 - **[CountUp.js Vue component wrapper](https://github.com/xlsdg/vue-countup-v2)**
 - **[CountUp.js WordPress Plugin](https://wordpress.org/plugins/countup-js/)**
-- **[CountUp.js jQuery Plugin](https://gist.github.com/inorganik/b63dbe5b3810ff2c0175aee4670a4732)**
+- **[CountUp.js with jQuery](https://gist.github.com/inorganik/b63dbe5b3810ff2c0175aee4670a4732)**
 
 
 ## Features
@@ -67,6 +68,7 @@ interface CountUpOptions {
   scrollSpyDelay?: number; // delay (ms) after target comes into view
   scrollSpyOnce?: boolean; // run only once
   onCompleteCallback?: () => any; // gets called when animation completes
+  plugin?: CountUpPlugin; // for alternate animations
 }
 ```
 
@@ -207,3 +209,30 @@ Before you make a pull request, please be sure to follow these instructions:
 4. npm publish
 
 -->
+
+---
+
+## Creating Animation Plugins
+
+CountUp supports plugins as of v2.6.0. Plugins implement their own render method to display each frame's formatted value. A class instance or object can be passed to the `plugin` property of CountUpOptions, and the plugin's render method will be called instead of CountUp's.
+
+```ts
+export declare interface CountUpPlugin {
+  render(elem: HTMLElement, formatted: string): void;
+}
+```
+
+An example of a plugin:
+```ts
+export class SomePlugin implements CountUpPlugin {
+  // ...some properties here
+
+  constructor(options: SomePluginOptions) {
+    // ...setup code here if you need it
+  }
+
+  render(elem: HTMLElement, formatted: string): void {
+    // render DOM here
+  }
+}
+```

dist/countUp.d.ts

@@ -18,19 +18,23 @@ export interface CountUpOptions {
     scrollSpyDelay?: number;
     scrollSpyOnce?: boolean;
     onCompleteCallback?: () => any;
+    plugin?: CountUpPlugin;
+}
+export declare interface CountUpPlugin {
+    render(elem: HTMLElement, formatted: string): void;
 }
 export declare class CountUp {
     private endVal;
     options?: CountUpOptions;
     version: string;
     private defaults;
-    private el;
     private rAF;
     private startTime;
     private remaining;
     private finalEndVal;
     private useEasing;
     private countDown;
+    el: HTMLElement | HTMLInputElement;
     formattingFn: (num: number) => string;
     easingFn?: (t: number, b: number, c: number, d: number) => number;
     error: string;

dist/countUp.js

@@ -15,7 +15,7 @@ var CountUp = /** @class */ (function () {
         var _this = this;
         this.endVal = endVal;
         this.options = options;
-        this.version = '2.5.0';
+        this.version = '2.6.0';
         this.defaults = {
             startVal: 0,
             decimalPlaces: 0,
@@ -258,9 +258,14 @@ var CountUp = /** @class */ (function () {
         this.rAF = requestAnimationFrame(this.count);
     };
     CountUp.prototype.printValue = function (val) {
-        var result = this.formattingFn(val);
+        var _a;
         if (!this.el)
             return;
+        var result = this.formattingFn(val);
+        if ((_a = this.options.plugin) === null || _a === void 0 ? void 0 : _a.render) {
+            this.options.plugin.render(this.el, result);
+            return;
+        }
         if (this.el.tagName === 'INPUT') {
             var input = this.el;
             input.value = result;

dist/countUp.min.js

@@ -21,7 +21,7 @@
             var _this = this;
             this.endVal = endVal;
             this.options = options;
-            this.version = '2.5.0';
+            this.version = '2.6.0';
             this.defaults = {
                 startVal: 0,
                 decimalPlaces: 0,
@@ -264,9 +264,14 @@
             this.rAF = requestAnimationFrame(this.count);
         };
         CountUp.prototype.printValue = function (val) {
-            var result = this.formattingFn(val);
+            var _a;
             if (!this.el)
                 return;
+            var result = this.formattingFn(val);
+            if ((_a = this.options.plugin) === null || _a === void 0 ? void 0 : _a.render) {
+                this.options.plugin.render(this.el, result);
+                return;
+            }
             if (this.el.tagName === 'INPUT') {
                 var input = this.el;
                 input.value = result;