.eslintrc

@@ -24,7 +24,8 @@
         "import/no-extraneous-dependencies": [
             "error",
             { "devDependencies": true }
-        ]
+        ],
+        "import/extensions": ["warn", "never"]
     },
     "settings": {
         "react": {

package.json

@@ -1,6 +1,6 @@
 {
     "name": "react-text-loop",
-    "version": "2.2.1",
+    "version": "2.3.0",
     "description": "Create an animated loop of a list of text for your headings",
     "main": "./lib/index.js",
     "module": "es/index.js",
@@ -17,7 +17,7 @@
         "dev": "yarn run clean && cross-env BABEL_ENV=commonjs babel src -d lib --watch",
         "start": "parcel examples/index.html -d examples/dist --cache-dir examples/cache --open",
         "lint": "eslint src/ --ext .js,.tsx,.ts",
-        "prepublishOnly": "yarn run test && yarn run clean && yarn run build",
+        "prepublishOnly": "yarn run test && yarn run lint && yarn run ts:check && yarn run clean && yarn run build",
         "test": "jest",
         "test:coverage": "jest --coverage",
         "ts:check": "tsc -p tsconfig.json --allowJs false --noEmit --emitDeclarationOnly false"
@@ -53,32 +53,32 @@
     },
     "homepage": "https://github.com/braposo/react-text-loop#readme",
     "devDependencies": {
-        "@babel/cli": "^7.7.0",
-        "@babel/core": "^7.7.2",
-        "@babel/plugin-proposal-class-properties": "^7.7.0",
-        "@babel/plugin-proposal-object-rest-spread": "^7.6.2",
-        "@babel/plugin-transform-modules-commonjs": "^7.7.0",
-        "@babel/preset-env": "^7.7.1",
-        "@babel/preset-react": "^7.7.0",
-        "@babel/preset-typescript": "^7.7.2",
+        "@babel/cli": "^7.7.5",
+        "@babel/core": "^7.7.5",
+        "@babel/plugin-proposal-class-properties": "^7.7.4",
+        "@babel/plugin-proposal-object-rest-spread": "^7.7.4",
+        "@babel/plugin-transform-modules-commonjs": "^7.7.5",
+        "@babel/preset-env": "^7.7.6",
+        "@babel/preset-react": "^7.7.4",
+        "@babel/preset-typescript": "^7.7.4",
         "@testing-library/jest-dom": "^4.2.4",
-        "@testing-library/react": "^9.3.2",
+        "@testing-library/react": "^9.4.0",
         "@types/jest": "^24.0.23",
-        "@types/node": "^12.12.8",
-        "@types/react": "^16.9.11",
+        "@types/node": "^12.12.17",
+        "@types/react": "^16.9.16",
         "@types/react-dom": "^16.9.4",
         "@types/react-motion": "^0.0.29",
-        "@typescript-eslint/eslint-plugin": "^2.7.0",
-        "@typescript-eslint/parser": "^2.7.0",
+        "@typescript-eslint/eslint-plugin": "^2.11.0",
+        "@typescript-eslint/parser": "^2.11.0",
         "babel-eslint": "^10.0.3",
         "babel-loader": "^8.0.6",
         "cross-env": "^6.0.3",
-        "eslint": "^6.6.0",
+        "eslint": "^6.7.2",
         "eslint-config-airbnb-base": "^14.0.0",
-        "eslint-config-prettier": "^6.6.0",
-        "eslint-plugin-import": "^2.18.2",
+        "eslint-config-prettier": "^6.7.0",
+        "eslint-plugin-import": "^2.19.1",
         "eslint-plugin-prettier": "^3.1.1",
-        "eslint-plugin-react": "^7.16.0",
+        "eslint-plugin-react": "^7.17.0",
         "jest": "^24.9.0",
         "npm-run-all": "^4.1.5",
         "parcel-bundler": "^1.12.4",
@@ -87,8 +87,8 @@
         "react-dom": "^16.12.0",
         "rimraf": "^3.0.0",
         "source-map-loader": "^0.2.4",
-        "ts-jest": "^24.1.0",
-        "typescript": "^3.7.2",
+        "ts-jest": "^24.2.0",
+        "typescript": "^3.7.3",
         "webpack": "^4.41.2",
         "webpack-cli": "^3.3.10"
     },

src/components/TextLoop.tsx

@@ -94,6 +94,18 @@ class TextLoop extends React.PureComponent<Props, State> {
                 this.tickDelay = requestTimeout(() => {
                     this.tickLoop = requestTimeout(this.tick, currentInterval);
                 }, delay);
+            } else {
+                this.setState((state, props) => {
+                    const { currentWordIndex: _currentWordIndex } = state;
+
+                    return {
+                        currentInterval: Array.isArray(props.interval)
+                            ? props.interval[
+                                  _currentWordIndex % props.interval.length
+                              ]
+                            : props.interval,
+                    };
+                });
             }
         }
 

src/utils.ts

@@ -1,15 +1,19 @@
 declare global {
     interface Window {
-        mozRequestAnimationFrame: any;
-        oRequestAnimationFrame: any;
-        msRequestAnimationFrame: any;
-        mozCancelRequestAnimationFrame: any;
-        webkitCancelRequestAnimationFrame: any;
-        oCancelRequestAnimationFrame: any;
-        msCancelRequestAnimationFrame: any;
+        mozRequestAnimationFrame;
+        oRequestAnimationFrame;
+        msRequestAnimationFrame;
+        mozCancelRequestAnimationFrame;
+        webkitCancelRequestAnimationFrame;
+        oCancelRequestAnimationFrame;
+        msCancelRequestAnimationFrame;
     }
 }
 
+declare interface Handle {
+    value: number | void;
+}
+
 const requestAnimFrame = ((): Function => {
     if (typeof window !== "undefined") {
         return (
@@ -24,10 +28,12 @@ const requestAnimFrame = ((): Function => {
         );
     }
 
-    return (): void => {};
+    return (): void => {
+        /* return empty function */
+    };
 })();
 
-export type RequestTimeout = number | void;
+export type RequestTimeout = object | number | void;
 /*
  * Behaves the same as setTimeout except uses requestAnimationFrame() where possible for better performance
  * @param {function} fn The callback function
@@ -52,7 +58,7 @@ export const requestTimeout = function(
 
     const start = new Date().getTime();
 
-    let value: number | void = 0;
+    const handle: Handle = { value: 0 };
 
     function loop(): number | void {
         const current = new Date().getTime();
@@ -62,12 +68,12 @@ export const requestTimeout = function(
         if (delta >= delay) {
             fn.call(null);
         } else {
-            value = requestAnimFrame(loop);
+            handle.value = requestAnimFrame(loop);
         }
     }
 
-    value = requestAnimFrame(loop);
-    return value;
+    handle.value = requestAnimFrame(loop);
+    return handle;
 };
 
 /**