feat(hooks): move typing logic to useTypingEffect hook

src/hooks/index.ts

@@ -2,4 +2,5 @@ export { default as useBuildTime } from './useBuildTime';
 export { default as useDisqus } from './useDisqus';
 export { default as usePostsMetadata } from './usePostsMetadata';
 export { default as useSiteMetadata } from './useSiteMetadata';
+export { default as useTypingEffect } from './useTypingEffect';
 export { default as useVisibility } from './useVisibility';

src/hooks/useTypingEffect.ts

@@ -0,0 +1,40 @@
+import { RefObject, useEffect, useRef } from 'react';
+import Typed from 'typed.js';
+
+interface TypingOptions {
+  titles: string[];
+  speed: number;
+  delay: number;
+  loop: boolean;
+}
+
+const useTypingEffect = (
+  ref: RefObject<HTMLElement>,
+  options: TypingOptions
+): void => {
+  const { titles, speed, delay, loop } = options;
+  const typed = useRef<Typed | null>(null);
+
+  useEffect(() => {
+    const options = {
+      strings: [...titles],
+      smartBackspace: true,
+      typeSpeed: speed,
+      backSpeed: speed,
+      backDelay: delay,
+      loop,
+    };
+
+    if (ref.current) {
+      typed.current = new Typed(ref.current, options);
+    }
+
+    return () => {
+      if (typed.current) {
+        typed.current.destroy();
+      }
+    };
+  }, [ref, titles, speed, delay, loop]);
+};
+
+export default useTypingEffect;