From 5eb908d10283567d6529829ce3313e53d6abe725 Mon Sep 17 00:00:00 2001
From: Archie Herbias <archie.herbias@gmail.com>
Date: Thu, 11 Oct 2018 23:06:41 +0800
Subject: [PATCH 1/2] Fix visible count to -1 when it goes down less than -1

---
 src/components/TypeWriter.jsx | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/components/TypeWriter.jsx b/src/components/TypeWriter.jsx
index aeadec8..2fa1221 100644
--- a/src/components/TypeWriter.jsx
+++ b/src/components/TypeWriter.jsx
@@ -110,9 +110,13 @@ class TypeWriter extends React.Component {
   _handleTimeout() {
     const {typing} = this.props;
     const {visibleChars} = this.state;
+    
+    let visible = visibleChars
+
+    if (visible < -1) visible = -1
 
     this.setState({
-      visibleChars: visibleChars + typing
+      visibleChars: visible + typing
     });
   }
 }

From 837670f7305b1dc514a75bdcea34dac2eb99167f Mon Sep 17 00:00:00 2001
From: Archie Herbias <archie.herbias@gmail.com>
Date: Thu, 11 Oct 2018 23:45:15 +0800
Subject: [PATCH 2/2] Fixed revesing typing value while on transition results
 to out of bounds visibleChars calculation

---
 src/components/TypeWriter.jsx | 10 ++++------
 1 file changed, 4 insertions(+), 6 deletions(-)

diff --git a/src/components/TypeWriter.jsx b/src/components/TypeWriter.jsx
index 2fa1221..1cf665d 100644
--- a/src/components/TypeWriter.jsx
+++ b/src/components/TypeWriter.jsx
@@ -28,10 +28,12 @@ class TypeWriter extends React.Component {
     const active = this.props.typing;
 
     if (active > 0 && next < 0) {
+      clearInterval(this._timeoutId);
       this.setState({
         visibleChars: this.state.visibleChars - 1
       });
     } else if (active <= 0 && next > 0) {
+      clearInterval(this._timeoutId);
       this.setState({
         visibleChars: this.state.visibleChars + 1
       });
@@ -103,20 +105,16 @@ class TypeWriter extends React.Component {
     } = this.state;
     const container = <span {...props}>{children}</span>;
     const hideStyle = fixed ? {visibility: 'hidden'} : {display: 'none'};
-
+    
     return styleComponentSubstring(container, hideStyle, visibleChars);
   }
 
   _handleTimeout() {
     const {typing} = this.props;
     const {visibleChars} = this.state;
-    
-    let visible = visibleChars
-
-    if (visible < -1) visible = -1
 
     this.setState({
-      visibleChars: visible + typing
+      visibleChars: visibleChars + typing
     });
   }
 }