diff --git a/example/src/App.css b/example/src/App.css index d84dc81ec..daaa2c2d4 100644 --- a/example/src/App.css +++ b/example/src/App.css @@ -5,7 +5,7 @@ body { } p { - margin: 0; + margin: 5px 0; } .App { @@ -13,12 +13,12 @@ p { 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 index 1c88c782e..977dad2c0 100644 --- 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 ( -
-
-

react-insta-stories [v2.2.0]

-

Create Instagram like stories on the web using React

-
- npm i react-insta-stories -
- Documentation → -
-

Made with ♥ by @mohitk05

+function App() { + return ( +
+
+

react-insta-stories [v2.2.1]

+

Create Instagram like stories on the web using React

+
+ npm i react-insta-stories +

Documentation →

+

Made with ♥ by @mohitk05

+

◀ Tap left for previous story

+

▶︎ Tap right for next story

+

◉ Press and hold to pause

+
+
+

Updates [V2.2.1]

+

1. Bug fixes (#130)

+

Updates [V2.1.2]

+

1. Pass in renderers to switch story UI according to certain conditions

+

2. Internal code structure changed keeping in mind long-term maintainability

+

3. Community based pluggable renderers possible now

+

4. Optional keyboard navigation

+

5. Bug fixes

+

Read more here →

+

+

Updates [V2.0.0]

+

1. Render your own components/JSX in stories

+

2. Create multiple instances to recreate stories by multiple users easily, jump to stories using props

+

3. Prop based control, event callbacks

+

4. Custom JSX gives control to pause/play story

+

5. (for devs) TypeScript 🎉

+

6. (for devs) Updated for easier feature additions, hooks

+

+

Updates [V1.4.1]

+

1. Stories stretch to fill screen by default

+

2. Style story content using 'storyStyles' prop 💅

+

3. Add individual styling to each story


-

◀ Tap left for previous story

-

▶︎ Tap right for next story

-

◉ Press and hold to pause

+

Updates [V1.4.0]

+

1. 'See more' feature added 🤳

+

2. Video playback fixes


-
-

Updates [V2.1.2]

-

1. Pass in renderers to switch story UI according to certain conditions

-

2. Internal code structure changed keeping in mind long-term maintainability

-

3. Community based pluggable renderers possible now

-

4. Optional keyboard navigation

-

5. Bug fixes

-

Read more here →

-

-

Updates [V2.0.0]

-

1. Render your own components/JSX in stories

-

2. Create multiple instances to recreate stories by multiple users easily, jump to stories using props

-

3. Prop based control, event callbacks

-

4. Custom JSX gives control to pause/play story

-

5. (for devs) TypeScript 🎉

-

6. (for devs) Updated for easier feature additions, hooks

-

-

Updates [V1.4.1]

-

1. Stories stretch to fill screen by default

-

2. Style story content using 'storyStyles' prop 💅

-

3. Add individual styling to each story

-
-

Updates [V1.4.0]

-

1. 'See more' feature added 🤳

-

2. Video playback fixes

-
-

Updates [V1.3.0]

-

1. Video support added 🎉

-

2. babel-polyfill error fix 👾

-

3. Changed progress animation to plain CSS

-
-

Updates [V1.2.0]

-

1. Now you can add a header to the story

-

2. Image aspect ratio retained if story size changed (fix)

-
+

Updates [V1.3.0]

+

1. Video support added 🎉

+

2. babel-polyfill error fix 👾

+

3. Changed progress animation to plain CSS


-

Know more about me here: mohitkarekar.com

-
-
- 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)} - /> +

Updates [V1.2.0]

+

1. Now you can add a header to the story

+

2. Image aspect ratio retained if story size changed (fix)

+
+

Know more about me here: mohitkarekar.com

- ); - } +
+ 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' }} + /> +
+
+ ); } const Story2 = ({ action, isPaused }) => { - return
+ return

You get the control of the story.

Render your custom JSX by passing just a content property inside your story object.

You get a action prop as an input to your content function, that can be used to play or pause the story.

@@ -107,7 +105,7 @@ const stories2 = [ }, { content: ({ action, story }) => { - return
+ return

🌝

We have our good old image and video stories, just the same.

 @@ -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 index 1e1e3a160..cabf7d706 100644 --- a/example/src/index.ejs +++ b/example/src/index.ejs @@ -5,7 +5,7 @@ react-insta-stories - + diff --git a/package.json b/package.json index 0536a6265..d833492d4 100644 --- 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 index adfd9deba..589f17293 100644 --- a/src/components/Container.tsx +++ b/src/components/Container.tsx @@ -13,6 +13,7 @@ export default function () { const [videoDuration, setVideoDuration] = useState(0) let mousedownId = useRef(); + let isMounted = useRef(true); const { width, height, loop, currentIndex, isPaused, keyboardNavigation, storyContainerStyles = {} } = useContext(GlobalContext); const { stories } = useContext(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 index 541bcca5d..50b7b94fe 100644 --- 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(); } }