Fix for issue #130, added mounted check

mohitk05 · Jun 20, 2021 · 80adf1e · 80adf1e
1 parent 1e54088
commit 80adf1e
Show file tree

Hide file tree

Showing 6 changed files with 91 additions and 83 deletions.
diff --git a/example/src/App.css b/example/src/App.css
@@ -5,20 +5,20 @@ body {
 }
 
 p {
-	margin: 0;
+	margin: 5px 0;
 }
 
 .App {
 	margin: 2rem;
 	display: flex;
 	justify-content: center;
 	align-items: center;
-	font-family: 'Karla', sans-serif;
+	font-family: 'Inter', sans-serif;
 	height: 87vh;
 }
 
 .stories {
-	filter: drop-shadow(0 10px 20px #aaa);
+	filter: drop-shadow(0 20px 30px #aaa);
 }
 
 .left {

diff --git a/example/src/App.js b/example/src/App.js
@@ -1,81 +1,79 @@
-import React, { useEffect } from 'react';
+import React from 'react';
 import './App.css';
 import Stories, { WithSeeMore } from 'react-insta-stories'
 
-class App extends React.Component {
-	render() {
-		return (
-			<div className="App">
-				<div className="left">
-					<h2><code><a rel="noopener noreferrer" href="https://www.npmjs.com/package/react-insta-stories" target="_blank">react-insta-stories [v2.2.0]</a></code></h2>
-					<p>Create Instagram like stories on the web using React</p>
-					<br />
-					<code ><span style={{ background: '#eee', padding: 5, paddingLeft: 10, paddingRight: 10, borderRadius: 5, width: 'auto' }}>npm i react-insta-stories</span></code>
-					<br />
-					<a href="https://github.com/mohitk05/react-insta-stories#react-insta-stories">Documentation →</a>
-					<br />
-					<p>Made with ♥ by <a rel="noopener noreferrer" href="https://github.com/mohitk05/react-insta-stories" target="_blank">@mohitk05</a></p>
+function App() {
+	return (
+		<div className="App">
+			<div className="left">
+				<h2><code><a rel="noopener noreferrer" href="https://www.npmjs.com/package/react-insta-stories" target="_blank">react-insta-stories [v2.2.1]</a></code></h2>
+				<p>Create Instagram like stories on the web using React</p>
+				<br />
+				<code style={{ marginTop: 10, marginBottom: 10 }}><span style={{ background: '#eee', padding: 5, paddingLeft: 10, paddingRight: 10, borderRadius: 5, width: 'auto' }}>npm i react-insta-stories</span></code>
+				<p><a href="https://github.com/mohitk05/react-insta-stories#react-insta-stories">Documentation →</a></p>
+				<p>Made with ♥ by <a rel="noopener noreferrer" href="https://github.com/mohitk05/react-insta-stories" target="_blank">@mohitk05</a></p>
+				<div style={{ background: '#eee', padding: 5, paddingLeft: 10, paddingRight: 10, borderRadius: 5, width: 'auto' }}><p>◀ Tap left for previous story</p>
+					<p>▶︎ Tap right for next story</p>
+					<p>◉ Press and hold to pause</p></div>
+				<br />
+				<div className="updates">
+					<p><mark><b>Updates [V2.2.1]</b></mark></p>
+					<p>1. Bug fixes (<a href="https://github.com/mohitk05/react-insta-stories/issues/130">#130</a>)</p>
+					<p><mark><b>Updates [V2.1.2]</b></mark></p>
+					<p>1. Pass in renderers to switch story UI according to certain conditions</p>
+					<p>2. Internal code structure changed keeping in mind long-term maintainability</p>
+					<p>3. Community based pluggable renderers possible now</p>
+					<p>4. Optional keyboard navigation</p>
+					<p>5. Bug fixes</p>
+					<p><a href="https://github.com/mohitk05/react-insta-stories/pull/80">Read more here →</a></p>
+					<br></br>
+					<p><mark><b>Updates [V2.0.0]</b></mark></p>
+					<p>1. Render your own components/JSX in stories</p>
+					<p>2. Create multiple instances to recreate stories by multiple users easily, jump to stories using props</p>
+					<p>3. Prop based control, event callbacks</p>
+					<p>4. Custom JSX gives control to pause/play story</p>
+					<p>5. (for devs) TypeScript 🎉</p>
+					<p>6. (for devs) Updated for easier feature additions, hooks</p>
+					<br></br>
+					<p><mark><b>Updates [V1.4.1]</b></mark></p>
+					<p>1. Stories stretch to fill screen by default</p>
+					<p>2. Style story content using 'storyStyles' prop 💅</p>
+					<p>3. Add individual styling to each story</p>
 					<br />
-					<div style={{ background: '#eee', padding: 5, paddingLeft: 10, paddingRight: 10, borderRadius: 5, width: 'auto' }}><p>◀ Tap left for previous story</p>
-						<p>▶︎ Tap right for next story</p>
-						<p>◉ Press and hold to pause</p></div>
+					<p><mark><b>Updates [V1.4.0]</b></mark></p>
+					<p>1. 'See more' feature added 🤳</p>
+					<p>2. Video playback fixes</p>
 					<br />
-					<div className="updates">
-						<p><mark><b>Updates [V2.1.2]</b></mark></p>
-						<p>1. Pass in renderers to switch story UI according to certain conditions</p>
-						<p>2. Internal code structure changed keeping in mind long-term maintainability</p>
-						<p>3. Community based pluggable renderers possible now</p>
-						<p>4. Optional keyboard navigation</p>
-						<p>5. Bug fixes</p>
-						<p><a href="https://github.com/mohitk05/react-insta-stories/pull/80">Read more here →</a></p>
-						<br></br>
-						<p><mark><b>Updates [V2.0.0]</b></mark></p>
-						<p>1. Render your own components/JSX in stories</p>
-						<p>2. Create multiple instances to recreate stories by multiple users easily, jump to stories using props</p>
-						<p>3. Prop based control, event callbacks</p>
-						<p>4. Custom JSX gives control to pause/play story</p>
-						<p>5. (for devs) TypeScript 🎉</p>
-						<p>6. (for devs) Updated for easier feature additions, hooks</p>
-						<br></br>
-						<p><mark><b>Updates [V1.4.1]</b></mark></p>
-						<p>1. Stories stretch to fill screen by default</p>
-						<p>2. Style story content using 'storyStyles' prop 💅</p>
-						<p>3. Add individual styling to each story</p>
-						<br />
-						<p><mark><b>Updates [V1.4.0]</b></mark></p>
-						<p>1. 'See more' feature added 🤳</p>
-						<p>2. Video playback fixes</p>
-						<br />
-						<p><mark><b>Updates [V1.3.0]</b></mark></p>
-						<p>1. Video support added 🎉</p>
-						<p>2. babel-polyfill error fix 👾</p>
-						<p>3. Changed progress animation to plain CSS</p>
-						<br />
-						<p><mark><b>Updates [V1.2.0]</b></mark></p>
-						<p>1. Now you can add a header to the story</p>
-						<p>2. Image aspect ratio retained if story size changed (fix)</p>
-					</div>
+					<p><mark><b>Updates [V1.3.0]</b></mark></p>
+					<p>1. Video support added 🎉</p>
+					<p>2. babel-polyfill error fix 👾</p>
+					<p>3. Changed progress animation to plain CSS</p>
 					<br />
-					<p>Know more about me here: <a rel="noopener noreferrer" href="https://mohitkarekar.com" target="_blank">mohitkarekar.com</a></p>
-				</div>
-				<div className="stories">
-					<Stories
-						loop
-						keyboardNavigation
-						defaultInterval={8000}
-						stories={stories2}
-						onStoryEnd={(s, st) => console.log('story ended', s, st)}
-						onAllStoriesEnd={(s, st) => console.log('all stories ended', s, st)}
-						onStoryStart={(s, st) => console.log('story started', s, st)}
-					/>
+					<p><mark><b>Updates [V1.2.0]</b></mark></p>
+					<p>1. Now you can add a header to the story</p>
+					<p>2. Image aspect ratio retained if story size changed (fix)</p>
 				</div>
+				<br />
+				<p>Know more about me here: <a rel="noopener noreferrer" href="https://mohitkarekar.com" target="_blank">mohitkarekar.com</a></p>
 			</div>
-		);
-	}
+			<div className="stories">
+				<Stories
+					loop
+					keyboardNavigation
+					defaultInterval={8000}
+					stories={stories2}
+					onStoryEnd={(s, st) => console.log('story ended', s, st)}
+					onAllStoriesEnd={(s, st) => console.log('all stories ended', s, st)}
+					onStoryStart={(s, st) => console.log('story started', s, st)}
+					storyContainerStyles={{ borderRadius: 8, overflow: 'hidden' }}
+				/>
+			</div>
+		</div>
+	);
 }
 
 const Story2 = ({ action, isPaused }) => {
-	return <div style={{ ...contentStyle, background: 'Aquamarine', color: '#16161d' }}>
+	return <div style={{ ...contentStyle, background: 'Aquamarine', color: '#333' }}>
 		<h1>You get the control of the story.</h1>
 		<p>Render your custom JSX by passing just a <code style={{ fontStyle: 'italic' }}>content</code> property inside your story object.</p>
 		<p>You get a <code style={{ fontStyle: 'italic' }}>action</code> prop as an input to your content function, that can be used to play or pause the story.</p>
@@ -107,7 +105,7 @@ const stories2 = [
 	},
 	{
 		content: ({ action, story }) => {
-			return <WithSeeMore story={story} action={action}><div style={{ background: 'pink', padding: 20, height: '100%' }}>
+			return <WithSeeMore story={story} action={action}><div style={{ background: 'snow', padding: 20, height: '100%' }}>
 				<h1 style={{ marginTop: '100%', marginBottom: 0 }}>🌝</h1>
 				<h1 style={{ marginTop: 5 }}>We have our good old image and video stories, just the same.</h1>
 			</div></WithSeeMore>
@@ -143,7 +141,7 @@ const code = {
 }
 
 const contentStyle = {
-	background: 'salmon',
+	background: '#333',
 	width: '100%',
 	padding: 20,
 	color: 'white',

diff --git a/example/src/index.ejs b/example/src/index.ejs
@@ -5,7 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>react-insta-stories</title>
     <link rel="shortcut icon" type="image/ico" href="/ris.ico" />
-    <link href="https://fonts.googleapis.com/css?family=Karla|Source+Code+Pro&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css?family=Inter|Source+Code+Pro&display=swap" rel="stylesheet">
 </head>
 
 <body>

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "react-insta-stories",
-	"version": "2.2.0",
+	"version": "2.2.1",
 	"description": "A React component for Instagram like stories",
 	"main": "dist/index.js",
 	"types": "dist/index.d.ts",

diff --git a/src/components/Container.tsx b/src/components/Container.tsx
@@ -13,6 +13,7 @@ export default function () {
     const [videoDuration, setVideoDuration] = useState<number>(0)
 
     let mousedownId = useRef<any>();
+    let isMounted = useRef<boolean>(true);
 
     const { width, height, loop, currentIndex, isPaused, keyboardNavigation, storyContainerStyles = {} } = useContext<GlobalCtx>(GlobalContext);
     const { stories } = useContext<StoriesContextInterface>(StoriesContext);
@@ -41,7 +42,14 @@ export default function () {
                 document.removeEventListener("keydown", handleKeyDown);
             }
         }
-    }, [keyboardNavigation])
+    }, [keyboardNavigation]);
+
+    // Cleanup mounted state - for issue #130 (https://github.com/mohitk05/react-insta-stories/issues/130)
+    useEffect(() => {
+        return () => {
+            isMounted.current = false;
+        }
+    }, []);
 
     const handleKeyDown = (e: KeyboardEvent) => {
         if (e.key === 'ArrowLeft') {
@@ -67,10 +75,12 @@ export default function () {
     }
 
     const next = () => {
-        if (loop) {
-            updateNextStoryIdForLoop()
-        } else {
-            updateNextStoryId()
+        if (isMounted.current) {
+            if (loop) {
+                updateNextStoryIdForLoop()
+            } else {
+                updateNextStoryId()
+            }
         }
     };
 

diff --git a/src/components/ProgressArray.tsx b/src/components/ProgressArray.tsx
@@ -37,12 +37,12 @@ export default () => {
         if (countCopy < 100) {
             animationFrameId.current = requestAnimationFrame(incrementCount)
         } else {
-            storyEndCallback()
+            storyEndCallback();
             if (currentId === stories.length - 1) {
-                allStoriesEndCallback()
+                allStoriesEndCallback();
             }
-            cancelAnimationFrame(animationFrameId.current)
-            next()
+            cancelAnimationFrame(animationFrameId.current);
+            next();
         }
     }