Merge pull request #107 from jason89521/feat/implement-hide-cursor-when-done

Feat/implement hide cursor when done

Author: jason89521

README.md

@@ -54,6 +54,7 @@ export type TypistProps = {
   cursor?: string | React.ReactElement;
   disabled?: boolean;
   restartKey?: any;
+  hideCursorWhenDone?: boolean;
 };
 ```
 
@@ -156,6 +157,10 @@ If this value is `true`, the result will be displayed immediately without typing
 
 `Typist` will restart the typing animation whenever `restartKey` changes.
 
+#### `hideCursorWhenDone`
+
+Hide the cursor when the typing animation is done.
+
 ### `Typist.Backspace`
 
 ```ts

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-typist-component",
-  "version": "1.0.6",
+  "version": "1.1.0",
   "description": "A react component lets you create typewriter effect.",
   "author": "Yu-Xuan Zheng",
   "keywords": [

src/components/Main.tsx

@@ -20,6 +20,7 @@ const Main = ({
   finishDelay = 0,
   loop = false,
   pause = false,
+  hideCursorWhenDone = false,
 }: TypistProps) => {
   const [typedChildrenArray, setTypedChildrenArray] = useState<TypedChildren[]>(
     [],
@@ -28,6 +29,8 @@ const Main = ({
   const clearTimerRef = useRef(emptyFunc);
   const loopRef = useRef(loop);
   const pauseRef = useRef(pause);
+  const hideCursorWhenDoneRef = useRef(hideCursorWhenDone);
+  const [showCursor, setShowCursor] = useState(true);
 
   const timeoutPromise = useCallback((delay: Delay) => {
     return new Promise((resolve, reject) => {
@@ -73,7 +76,8 @@ const Main = ({
   useEffect(() => {
     loopRef.current = loop;
     pauseRef.current = pause;
-  }, [loop, pause]);
+    hideCursorWhenDoneRef.current = hideCursorWhenDone;
+  }, [loop, pause, hideCursorWhenDone]);
 
   useEffect(() => {
     const typedChildrenArray = getTypedChildrenArray(children, splitter);
@@ -86,6 +90,7 @@ const Main = ({
     (async () => {
       try {
         do {
+          setShowCursor(true);
           setCurrentIndex(-1);
           const actions = getActions(children, splitter);
           if (startDelay > 0) await timeoutPromise(startDelay);
@@ -107,6 +112,7 @@ const Main = ({
             }
           }
           onTypingDone?.();
+          setShowCursor(false);
           if (finishDelay > 0) await timeoutPromise(finishDelay);
           if (!loopRef.current) await loopPromise();
         } while (loopRef.current);
@@ -123,7 +129,13 @@ const Main = ({
   }, [restartKey, disabled]);
 
   const typedChildren = typedChildrenArray[currentIndex];
-  return <>{cursor ? insertCursor(typedChildren, cursor) : typedChildren}</>;
+  return (
+    <>
+      {cursor && showCursor
+        ? insertCursor(typedChildren, cursor)
+        : typedChildren}
+    </>
+  );
 };
 
 export default Main;

src/types/TypistProps.ts

@@ -16,4 +16,5 @@ export type TypistProps = {
   cursor?: string | React.ReactElement;
   disabled?: boolean;
   restartKey?: any;
+  hideCursorWhenDone?: boolean;
 };