Update dependencies and fix types.

.github/workflows/test.yml

@@ -6,12 +6,12 @@ jobs:
   build:
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@v2
+    - uses: actions/checkout@v3
       with:
         ref: ${{ github.event.pull_request.head.sha }}
-    - uses: actions/setup-node@v2
+    - uses: actions/setup-node@v3
       with:
-        node-version: 17
+        node-version: 18
     - name: Install Dependencies
       run: npm install && npm run bootstrap
     - name: Run Tests

package.json

@@ -15,9 +15,9 @@
     "*.{js,md}": "prettier --write"
   },
   "devDependencies": {
-    "husky": "^8.0.1",
-    "lerna": "^5.1.8",
-    "lint-staged": "^13.0.3",
-    "prettier": "^2.7.1"
+    "husky": "^8.0.2",
+    "lerna": "^6.1.0",
+    "lint-staged": "^13.1.0",
+    "prettier": "^2.8.1"
   }
 }

packages/typeit-react/package.json

@@ -1,13 +1,14 @@
 {
   "name": "typeit-react",
-  "version": "2.6.0",
+  "version": "2.6.1",
   "description": "React component for the most versatile JavaScript animated typing utility on the planet.",
   "homepage": "https://typeitjs.com",
   "main": "dist/index.umd.js",
   "module": "dist/index.es.js",
   "types": "dist/index.d.ts",
   "scripts": {
     "build": "vite build && tsc",
+    "tsc": "tsc",
     "start": "vite serve examples",
     "prettier": "prettier --write \"**/*.{md,js}\"",
     "test": "echo \"Error: no test specified\" && exit 0",
@@ -37,14 +38,15 @@
   "author": "Alex MacArthur <[email protected]> (https://macarthur.me)",
   "license": "GPL-3.0",
   "dependencies": {
-    "@types/react": "^18.0.12",
-    "react": "^18.1.0",
-    "react-dom": "^18.1.0",
-    "typeit": "^8.7.0",
-    "vite": "^2.9.12"
+    "@types/react": "^18.0.26",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "typeit": "^8.7.1",
+    "vite": "^4.0.1"
   },
   "devDependencies": {
-    "@babel/preset-typescript": "^7.17.12",
-    "typescript": "^4.7.3"
+    "@babel/preset-typescript": "^7.18.6",
+    "terser": "^5.16.1",
+    "typescript": "^4.9.4"
   }
 }

packages/typeit-react/src/index.tsx

@@ -1,4 +1,5 @@
 import * as React from "react";
+import { forwardRef } from "react";
 import { default as TypeItCore, TypeItOptions } from "typeit";
 const { useRef, useEffect, useState } = React;
 
@@ -18,20 +19,19 @@ const defaultProps: TypeItProps = {
   getAfterInit: (instance) => instance,
 };
 
+const DynamicElementComponent = forwardRef((props: any, ref) => {
+  const { as: As } = props;
+
+  return <As ref={ref} {...props} />;
+});
+
 const TypeIt: React.FunctionComponent<TypeItProps> = (props: TypeItProps) => {
   const elementRef = useRef(null);
   const instanceRef = useRef(null);
-  const {
-    options,
-    as,
-    children,
-    getBeforeInit,
-    getAfterInit,
-    ...remainingProps
-  } = props;
+  const { options, children, getBeforeInit, getAfterInit, ...remainingProps } =
+    props;
   const [shouldShowChildren, setShouldShowChildren] = useState<boolean>(true);
   const [instanceOptions, setInstanceOptions] = useState(null);
-  const DynamicElement = as;
 
   function calculateOptions() {
     const optionsClone = Object.assign({}, options);
@@ -75,14 +75,14 @@ const TypeIt: React.FunctionComponent<TypeItProps> = (props: TypeItProps) => {
   }, [instanceOptions]);
 
   /**
-   * Destroy the instace whenever the component unmounts.
+   * Destroy the instance whenever the component unmounts.
    */
   useEffect(() => {
     return () => instanceRef.current?.destroy();
   }, []);
 
   return (
-    <DynamicElement
+    <DynamicElementComponent
       ref={elementRef}
       children={shouldShowChildren ? children : null}
       style={{ opacity: shouldShowChildren ? 0 : 1 }}

packages/typeit-react/tsconfig.json

@@ -4,5 +4,8 @@
         "outDir": "dist",
         "jsx": "react",
         "module": "es6"
-    }
+    }, 
+    "include": [
+        "src/**/*"
+    ]
 }