mohitk05 / react-insta-stories

A React component for Instagram like stories

react-insta-stories

A React component for Instagram like stories

Homepage • Discord

   

Install

npm install --save react-insta-stories

Demo

The component responds to actions like tap on right side for next story, on left for previous and tap and hold for pause. Custom time duration for each story can be provided. See it in action here: https://mohitk05.github.io/react-insta-stories/

Usage

import React, { Component } from 'react';

import Stories from 'react-insta-stories';

const App = () => {
	return (
		<Stories
			stories={stories}
			defaultInterval={1500}
			width={432}
			height={768}
		/>
	);
};

Here stories is an array of story objects, which can be of various types as described below.

Props

Property	Type	Default	Description
stories	[String/Object]	required	An array of image urls or array of story objects (options described below)
renderers ⚡️	[Object]	[]	An array of renderer objects (options described below)
defaultInterval	Number	1200	Milliseconds duration for which a story persists
loader	Component	Ripple loader	A loader component as a fallback until image loads from url
header	Component	Default header as in demo	A header component which sits at the top of each story. It receives the header object from the story object. Data for header to be sent with each story object.
storyContainerStyles	Object	{}	Styles object for the outer container
width	Number/String	360	Width of the component, e.g. 600 or '100vw' or 'inherit'
height	Number/String	640	Height of the component, e.g. 1000 or '100%' or 'inherit'
storyStyles	Object	none	Override the default story styles mentioned below.
progressContainerStyles	Object	{}	Styles object for the container wrapping the progress bars
progressWrapperStyles	Object	{}	Styles object for the container wrapping each progress bar bars
progressStyles	Object	{}	Styles object for the progress bars
loop	Boolean	false	The last story loop to the first one and restart the stories.
New props	⭐️	⭐️	⭐️
isPaused	Boolean	false	Toggle story playing state
currentIndex	Number	undefined	Set the current story index
onStoryStart	Function	-	Callback when a story starts
onStoryEnd	Function	-	Callback when a story ends
onAllStoriesEnd	Function	-	Callback when all stories in the array have ended
onNext	Function	-	Callback when the user taps/press to proceed to the next story
onPrevious	Function	-	Callback when the user taps/press to go back to the previous story
keyboardNavigation	Boolean	false	Attaches arrow key listeners to navigate between stories if true. Also adds up arrow key listener for opening See More and Escape/down arrow for closing it
preventDefault	Boolean	false	Disable the default behavior when user click the component
preloadCount	number	1	Determines how many stories should be preloaded ahead of the current story index.

Story object

Instead of simple string url, a comprehensive 'story object' can also be passed in the stories array.

Property	Description
url	The url of the resource, be it image or video.
type	Optional. Type of the story. `type: 'video'
duration	Optional. Duration for which a story should persist.
header	Optional. Adds a header on the top. Object with heading, subheading and profileImage properties.
seeMore	Optional. Adds a see more icon at the bottom of the story. On clicking, opens up this component. (v2: updated to Function instead of element)
seeMoreCollapsed	Optional. Send custom component to be rendered instead of the default 'See More' text.
styles	Optional. Override the default story styles mentioned below.
preloadResource	Optional. Whether to preload the resource or not, defaults to true for images and false for videos (video preloading is experimental)

Default story styles

Following are the default story content styles. Override them by providing your own style object with each story or a global override by using the storyStyles prop.

storyContent: {
    width: 'auto',
    maxWidth: '100%',
    maxHeight: '100%',
    margin: 'auto'
}

Renderers

To allow reusable components to display story UI, you can pass in pre-built or custom-built components in a special manner to leverage this behavior. Each renderer object has two properties:

• renderer - This is the UI component that will be rendered whenever the object matches certain conditions.
• tester - This is a function that tests whether the renderer is suitable for the current story. It receives the current story object to render and returns an object with two properties:
  • condition - This states if the renderer matches the current story's criteria (a boolean).
  • priority - A number denoting the priority of the current renderer. E.g. priority of 2 is less than a 5, and if two renderers have condition = true, their priorities will be compared and the one with higher priority will be selected.

So essentially a simple renderer would look like this: (you may also refer the inbuilt Image renderer)

// Renderer.js

export const renderer = ({ story, action, isPaused, config }) => {
	return <div>Hello!</div>;
};

export const tester = (story) => {
	return {
		// Use this renderer only when the story type is video
		condition: story.type === 'video',
		priority: 3,
	};
};

Every renderer component gets 4 props as shown above. Out of these the story, action and isPaused are as their names suggest. The config object contains certain global properties which were passed while initialising the component. It looks like this:

const { width, height, loader, storyStyles } = config;

These props can be used to customize the entire UI as required, and then can be packaged as a Node module and shared. If someone else wishes to use your package as a renderer, they can simply pass it inside an array as the renderers prop to the main component. If you publish any such renderer, please raise a PR to add it to this list. A few suggestions would be a Markdown renderer, highlighted code renderer, etc.

List of public renderers:

• Add one here

Higher Order Components

WithSeeMore

This is a wrapper component which includes the UI and logic for displaying a 'See More' link at the bottom of the story. This is available as a named export from the package and can be used to easily add the functionality to a custom content story. It takes in two props - story and action.

const { WithSeeMore } from 'react-insta-stories';

const CustomStoryContent = ({ story, action }) => {
	return <WithSeeMore story={story} action={action}>
		<div>
			<h1>Hello!</h1>
			<p>This story would have a 'See More' link at the bottom ✨</p>
		</div>
	</WithSeeMore>
}

You can also send custom 'See More' component for the collapsed state. While using WithSeeMore, pass in a customCollapsed prop with a value of your custom component. It will receive a toggleMore and action prop to handle clicks on the See More link.

const { WithSeeMore } from 'react-insta-stories';

const customCollapsedComponent = ({ toggleMore, action }) =>
	<h2 onClick={() => {
		action('pause');
		window.open('https://mywebsite.url', '_blank');
	}}>
		Go to Website
	</h2>

const CustomStoryContent = ({ story, action }) => {
	return <WithSeeMore
		story={story}
		action={action}
		customCollapsed={customCollapsedComponent}
	>
		<div>
			<h1>Hello!</h1>
			<p>This story would have a 'See More' link at the bottom and will open a URL in a new tab.</p>
		</div>
	</WithSeeMore>
}

If not implementing a custom UI, you can send the customCollapsedComponent component inside the story object as seeMoreCollapsed.

const stories = [
	{
		url: 'some.url',
		seeMore: SeeMoreComponent, // when expanded
		seeMoreCollapsed: customCollapsedComponent, // when collapsed
	},
];

WithHeader

This named export can be used to include the header UI on any custom story. Simply wrap the component with this HOC and pass in some props.

const { WithHeader } from 'react-insta-stories';

const CustomStoryContent = ({ story, config }) => {
	return <WithHeader story={story} globalHeader={config.header}>
		<div>
			<h1>Hello!</h1>
			<p>This story would have the configured header!</p>
		</div>
	</WithHeader>
}

You may also use both these HOCs together, as in the Image renderer.

Common Usage

1. Basic implementation with string URLs

If you wish to have a bare minimum setup and only need to show image stories, you can simply pass the image urls inside the stories array. This will show all your images as stories.

import Stories from 'react-insta-stories';

const stories = [
	'https://example.com/pic.jpg',
	'data:image/jpg;base64,R0lGODl....',
	'https://mohitkarekar.com/icon.png',
];

return () => <Stories stories={stories} />;

2. Customising stories

If plain images does not suffice your usecase, you can pass an object instead of a string. This object supports all the properties mentioned above in the section story object. While using the object type, use url to denote the source url in case of media.

These properties can be mixed in different ways to obtain desired output.

Duration

Each story can be set to have a different duration.

const stories = [
	'https://example.com/pic.jpg',
	{
		url: 'https://example.com/pic2.jpg',
		duration: 5000,
	},
];

Header

Adds a header to the story.

const stories = [
	'https://example.com/pic.jpg',
	{
		url: 'https://example.com/pic2.jpg',
		duration: 5000,
		header: {
			heading: 'Mohit Karekar',
			subheading: 'Posted 30m ago',
			profileImage: 'https://picsum.photos/100/100',
		},
	},
];

See More

Adds a click to see more option at the bottom of the story. When present, shows the arrow at the bottom and when clicked, shows the provided component.

const stories = [
	'https://example.com/pic.jpg',
	{
		url: 'https://example.com/pic2.jpg',
		duration: 5000,
		seeMore: SeeMore, // some component
	},
	{
		url: 'https://example.com/pic3.jpg',
		duration: 2000,
		seeMore: ({ close }) => {
			return <div onClick={close}>Hello, click to close this.</div>;
		},
	},
];

Type

If provided type: video, then the component loads a video player. All expected features come in automatically. Duration is ignored, if provided and actual video duration is considered.

const stories = [
	'https://example.com/pic.jpg',
	{
		url: 'https://example.com/vid.mp4',
		duration: 5000, // ignored
		type: 'video',
	},
];

Styles

Override default story element styles. Regular style object can be provided.

3. Custom JSX as a story

You can render custom JSX inside a story by sending a content property inside the story object. If a content property is present, all other media related properties are ignored. duration holds true here.

const stories = [
	'https://example.com/pic.jpg',
	{
		content: (props) => (
			<div style={{ background: 'pink', padding: 20 }}>
				<h1 style={{ marginTop: '100%', marginBottom: 0 }}>🌝</h1>
				<h1 style={{ marginTop: 5 }}>A custom title can go here.</h1>
			</div>
		),
	},
];

The content property can hold any React component. For further control, it receives two important props:

• action It allows you to fire play/pause actions.
• isPaused Holds true is the story is currently paused, false otherwise.

const stories = [
	'https://example.com/pic.jpg',
	{
		content: ({ action, isPaused }) => {
			useEffect(() => {
				setTimeout(() => {
					action('pause');
					setTimeout(() => {
						action('play');
					}, 2000);
				}, 2000);
			}, []);
			return (
				<div style={{ background: 'pink', padding: 20 }}>
					<h1 style={{ marginTop: '100%', marginBottom: 0 }}>🌝</h1>
					<h1>{isPaused ? 'Paused' : 'Playing'}</h1>
				</div>
			);
		},
	},
];

In the code above, on render a timeout will be set which would fire a 'pause' action after 2 seconds. Again after 2 seconds, a 'play' action would be fired. In the JSX, isPaused is used to display the current play state.

Development

To develop this package locally, you can follo these steps:

1. Clone the repo to your local.
2. Run npm install.
3. Then cd example && npm install
4. Come back to the root directory cd ..
5. Run npm start
6. In a new command window/tab, run npm run example.

This will start a hot-reloading setup with a live example.

Thanks To

• @SamHambert for the default spinner SVG

Websites using react-insta-stories

• Corsza
• TLDR Stories
• Dysperse

Do you use react-insta-stories too? Raise a PR to include your site in this list!

Contributors

This project exists thanks to all the people who contribute.

Like the project? Support me on Ko-fi

License

MIT © mohitk05

react-insta-stories's Issues

Stop running automatically

when I update to version 2.1.2 for using WithSeeMore, stories cannot running automatically, it stop when first story ended, I need to touch to continue running.

but when I back to version 2.0.1, it works.
How can I fix it?

Don't work in "React Strict Mode"

Sandbox for reproducing:

https://codesandbox.io/s/pensive-stallman-xi70k?file=/src/index.js (change in code to const isStrictMod = true;).

Npm vs github

It seems the github version of the source code is a bit different than the one on npm, version are differents and the github version the progress bar isn't progressing..

Is it the latest version on github?

Thanks !

this project not run in local device

when git clone this app and do npm install and use npm start give me this message and not run

rollup v0.64.1
bundles src/index.js → dist/index.js, dist/index.es.js...
created dist/index.js, dist/index.es.js in 709ms

[2019-04-22 17:15:32] waiting for changes..

please how to solve this problem

Not playing in safari locally

I have a video file that's just local. In my stories object, I set the url: "/assets/videos/sample.mp4". It plays fine in production in all browsers, and it plays fine locally in all browsers except safari. Safari just doesn't want to load anything. I've tried all different weird hacks, but maybe someone here has come across some fix?

Safari 13.0.5 on macOS 10.15.3

Component is re-rendering without stop untill slide is over.

  {
    content: ({ action, isPaused }) => {
      console.log(isPaused); // gets called until slide is over
      return <Intro action={action} isPaused={isPaused} />;
    },
    duration: 3800,
  }
]

used simple config to test the story. i can see the component is rendered again and again until slide duration is over.

ReferenceError: document is not defined

Description I am facing "ReferenceError: document is not defined" When import import Stories from 'react-insta-stories'; in app.js React Native app.
I have installed library into the project successfully from npm install --save react-insta-stories

What am i doing wrong?

Issue screenshot:

My package.json

"react": "16.9.0",
"react-insta-stories": "^2.0.2",
"react-native": "0.61.5",

DOMException when first slide is unmuted video

When the first story is a video with sound and the user hasn't interacted with it, the loader will keep spinning even though the video is loaded. Seems like the Chrome video policy doesn't allow autoplay with sound on until user interacts with the component.

Is there a way to work around this? Taking a look at PR #47 may also help. Thanks!

currentId does not reset with change in stories Props

Updating the stories props for rendering different stories from different person can't reset the counter for new props that is a new array of stories pass to a story component. Which cause new stories to start from the counter where we left our previous stories.
For eg. I have a list of persons who uploaded there stories
Mr X uploaded 5 pictures
Mr Y uploaded 4 pictures
I saw 3 pictures of Mr X from Start and switch to Mr Y stories , So Mr Y stories does not start with the position 1 , it starts from picture 4 because I saw 3 pictures of Mr X and counter does not reset with change in props

Progress is stopped when state updated with new set of stories. Component stops re-rendering

I have a scenario like this. My requirement is, once the stories of #1 is over, the stories of #2 should be displayed, like how stories work normally. I keep the stories inside the state. After the stories of #1 is over, I update the state with the stories of #2. The component re-renders and the new set of stories is displayed. But the problem that I face is, The new set set of stories is stuck at the first story (the progress is not updating). It goes to the next story in the set when I click on the side and works normally.

I use the content property to display custom template for story. I see that the component stops re-rendering when the state is updated with new set of stories and they are displayed and continue to re-render when I tap on the side for the next story.

What is to be done for the progress to be resumed when the state is updated with new set of stories??

Fullscreen mode?

Is there a way to make the stories go in to a full screen mode?

this.stories.play() is starting the loader

I'm pausing the stories using a ref named "stories" i.e this.stories.pause() and on playi9ng it using this.stories.play(), the video is playing perfectly but the loader appears without any need.
Please help me on how to remove this unusual loader.
TIA

How to run the example locally

Thank you for the great plugin. It will be nice to have some description in the readme to run this project locally. I am having trouble starting it up locally. I am having the following error while running npm run deploy

npm ERR! path /Users/khawer/Projects/react-insta-stories/example/node_modules/.staging/react-insta-stories-4f928e7d/node_modules/@babel/code-frame
npm ERR! code ENOENT
npm ERR! errno -2
npm ERR! syscall rename
npm ERR! enoent ENOENT: no such file or directory, rename '/Users/khawer/Projects/react-insta-stories/example/node_modules/.staging/react-insta-stories-4f928e7d/node_modules/@babel/code-frame' -> '/Users/khawer/Projects/react-insta-stories/example/node_modules/.staging/@babel/code-frame-1ad58ac3'
npm ERR! enoent This is related to npm not being able to find a file.
npm ERR! enoent

Node Version: 11.3.0
NPM Version: 6.4.1

individual styling to each story

can't figure out how to add individual styling.

  {
    url:
      "xyz.com",
    header: {
      heading: "xyz",
      subheading: "Tzxy",
      profileImage: "xar",
      seeMore: "dasf",
      styles: {transform: 'scale(1.5)'}, //This is not working
    },
  },

is there any possibility to make zoom in animations with keyframes possible?
Would be nice if the img can have a className.

SeeMore tab? .. video enters a loop

I didn't understand the "close" idea in the "SeeMore" tab. Because the only thing I can do is erase the icon and "see more" wrote. I say this, because I'm having to create a particular logic to deal with the display "none" and "inside" when the user clicks to see or not the storie. A problem in this logic and I believe that the component as a whole, it goes into a loop. The video of the storie ends and the music continues to play as if he were in the gift still playing. So, any help would be appreciated to see how I could set up to have this click situation and that the video or photo is no longer being played, but especially the video because it is very annoying that you close a story and the music shows that it it's still running and you have to give f5 to get it out. Not to say, impractical. But as I said, I may not have understood something about the component that makes it possible to solve this issue.

Add Testing library

Do you have any plan to add testing libraries like jest and enzyme?

Screen size adjustments

How do I capture the standard look on different phone screens?

The loader is showing whenever I open a modal

The loader is showing if I have one story or when I open a modal, how to hide the loader when I open a modal?

Black endless loading

Image stories:
if i use same image url then i get endless blackoverlay+loader after 1st image so should be some issue if you used url like key

Video stories:
sometimes endless loading+blackoverlay, sometimes skipped and sometimes and sometimes played, should be some video load/preload issue?

import React from 'react';
import Stories from 'react-insta-stories';

const stories = [
  {
    url: 'https://file-examples-com.github.io/uploads/2017/10/file_example_JPG_100kB.jpg',
    type: 'image'
  },
  {
    url: 'https://www.sample-videos.com/video312/mp4/720/big_buck_bunny_720p_1mb.mp4',
    type: 'video'
  },
  {
    url: 'https://scontent.ftsr1-2.fna.fbcdn.net/v/t45.1600-4/cp0/q75/spS444/p526x296/117592197_23845254985100631_535175995998606741_n.jpg?_nc_cat=103&_nc_sid=67cdda&_nc_ohc=OpjhTO10kDYAX-8N0jV&_nc_ht=scontent.ftsr1-2.fna&oh=1c7092d971e24c980039efc7aa6e866c&oe=5F8298BD',
    type: 'image'
  },    
];

function App() {
  return (
    <div className="App">
      <Stories
        stories={stories}
        defaultInterval={15000}
        width={432}
        height={768}
      />
    </div>
  );
}

export default App;

{
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.5.0",
    "@testing-library/user-event": "^7.2.1",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-insta-stories": "^2.0.4",
    "react-scripts": "3.4.3"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

Default loader component not hiding on mobile once image is loaded

Hi I've integrated your package on my site and am noticing on mobile device with strong wifi that my remote image appears to load yet the loader component (default one) doesn't seem to hide (I see the loaded image behind the grey loader screen). Desktop works fine. I was wondering if you've encountered anything similar or are aware of any issues with onLoad call back for tags on mobile. Thanks!

Can't resolve 'babel-polyfill'

I'm getting this error on gatsbyjs site:

Failed to compile
./node_modules/react-insta-stories/dist/index.es.js
Module not found: Error: Can't resolve 'babel-polyfill' in '/Users/.../node_modules/react-insta-stories/dist'

Do I need babel-polyfill package installed?

How difficult would it be to add buttons?

Hi, this is such cool work. Thank you for building this. I absolutely love it.

I am reaching to ask if I wanted to create a poll and clickable buttons that perhaps have their own animations to the stories. How could I approach it?

Thanks!

Custom text for see more action

I wanted to use the 'see-more' component to show the list of people who viewed the story. Is it possible to change the 'see more' text in the caption to something else?

next() and previous() in version 2

I want to create 2 button - back and next to control stories, but I don't know how to use the next() and previous() function in version 2. Please help me!

Mute the video

Is there anyway to mute the video?

function to toggle next or previous slide

Hello! Thank you for your job. Its fantastic!

Can you help me with the task. I need to add buttons near stories. So in this case user will be able to to change stories with help of buttons.

List of stories

i have list of different stories and when click one of story how can i activate clicked story as a active story?

allow overlay

I would like the option to overlay an HTML node for each story, is this possible?

widht="100%" disables the tap events

Hello Team,
Firstly thanks for this valuable component, If I'm giving width ="100%" then

1. The tap events for previous, next, hold for pause are not working.
2. Getting warning in the console that 'NAN' is an invalid value for the width CSS style property.
   Please fix these.
   TIA
   

Redirection on See more

Currently, seeMore can load a new component. Is there a way to redirect to a new url on click of seemore?

Invalid hook call when running the example app

What I did:

$ lerna bootstrap
$ cd packages/react-insta-stories/example
$ yarn start

And then I get this error:

I'm not that familiar with monorepos and how to use them, maybe it makes sense to add docs on how to run this project for development. I'm willing to do this when I get this issue resolved :)

seeMore doesn't pause the story

The problem is related to the seeMore button.
Basically it doesn't stop the progress of the story, and it keeps going to the next slide. Sometimes it doesn't happend, so myabe the issue is related to the 'onTouch' to block the slide (debouncePause).

A solution that works is to edit in the Story.tsx the const toggleMore adding a timeout of 300 ms to the props.action()

const toggleMore = (show: boolean) => {
setShowMore(show)
setTimeout(() => {
props.action(show ? 'pause' : 'play')
}, 300)
};

EDIT:
The solution above doesn't seem to work.
Sometimes it still doesn't pause the story, but it seems to be completely random so far.

EDIT 2:
I temporary solved by stopping the stories on the one with the SeeMore prop. In this way, the stories stuck on that specific story, but you are able to go to the next story by simply clicking on the screen. You can also swipe up and see the inner content of the SeeMore prop without any trouble.
Obviously this doesn't solve the problem totally, since the story needs to stop without the user consent, but at least there won't be any bug.

If you want to go with this workaround, just add in Container.tsx file the following code in the first useEffect()

if (!pause && (typeof stories[currentId] === "object" && !stories[currentId].seeMore )) {

Basically I just added a statement on the type of the current story to check whether the story contains the seeMore prop.

Forking Instructions?

@mohitk05

I've tried to fork the repo so that I can make and test some updates before putting in a PR. I ran into issues with lerna and when just using the react-insta-stories dist. I keep getting Hook errors possibly caused by mismatched react versions.

I think I must be missing something since the package works from NPM and when I copy and use that code its seems to work unless I rebuild it (npm run build).

How to Render Status Card as well

could we add an option to pass background with status also

One more request about multiple person with multiple stories ?

how to reset progress bar when new stories added?

Close Button

How can i insert close button as "X" ?

Can't perform a React state update on an unmounted component

Most of the time, when I try to load a story with only one video, the video doesn't play, goes to the next user and logs the error message in the console:

Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function. in Unknown (created by b) in b (created by ListStoriesModal) in div (created by Unstable_TrapFocus) in Unstable_TrapFocus (created by ForwardRef(Modal)) in div (created by ForwardRef(Modal)) in ForwardRef(Portal) (created by ForwardRef(Modal)) in ForwardRef(Modal) (created by ListStoriesModal) in div (created by ListStoriesModal) in ListStoriesModal (created by AppComponent)

React Native support & video support

Hi @mohitkarekar @mohitk05 , first thank you for your amazing project.
I need to implement it in mobile phone, using react native. Is there a compatibility? If no we can work on it.
Also add video support will be a great feature.
I think this lib can become very popular, by allowing a lot of people to use it.
Thanks

Preload video link

Thanks for your awesome package.

Maybe the video player would be improve by a preload ?

When you load a video for the first time, the spinner of the loader is displayed, until the end of the duration.

If I go back to the previous story, and return to the next story, the video is loaded and correctly displayed.

I can reproduce this issue on my mobile with your sample video: https://storage.googleapis.com/coverr-main/mp4/Footboys.mp4 at each time.

Best regards,
Loïse

Story timing speeds up

story timing is increasing randomly and sometimes skips the slide.

one way to reproduce it

let the slide complete.
click previous and keep doing it . after some time you will notice the slide speed will increase.

while going into the sourcecode found the reason what is causing the speed up

const incrementCount = () => {
        setCount((count: number) => {
            if (count === 0) storyStartCallback()
            const interval = getCurrentInterval()
            if (count < 100) {
                animationFrameId.current = requestAnimationFrame(incrementCount)
            } else {
                storyEndCallback()
                if (currentId === stories.length - 1) {
                    allStoriesEndCallback()
                }
                next()
            }
            return count + (100 / ((interval / 1000) * 60))
        })
    }

i am not sure why but the incrementCount frequency increases drastically after you click on previous slide anchor.

for slides getting skipped

const updateNextStoryId = () => {
        if (currentId < stories.length - 1) {
            setCurrentId(currentId + 1) // you should use   setCurrentId(prevCurrentId=>prevCurrentId + 1)
            setCount(0)
        }
    }

   const previous = () => {
        if (currentId > 0) {
            setCurrentId(currentId - 1) // setCurrentId(prevCurrentId=>prevCurrentId - 1)
            setCount(0)
        }
    }

Initial touch-sensitive beep

Hi, how are you?

I need to build this functionality similar to instagram and soon thought, for sure some smart guys have already set up something similar. That was the case and I thank you so much. I have a performance related problem. The application works very well on the desktop, but for some detail when accessing the same website by cell phone, if the image does not immediately load that touch-sensitive 'beep' it does not leave the screen. I was wondering if there is an easy way to remove this beep when the component is assembled or if I would have to do something for myself in the responsive version! Anyway, thank you so much, the open-source lives!

And maybe, I'm sorry for my English, I'm from Brazil, I'm still learning!

Multiple slides gets switched

steps to reproduce

• open: http://react-insta-stories-v2.surge.sh/
• enter mobile view in chrome or any other browser
• quicky switch back and forth slides. say for 10-20 seconds
• now when you go to next slide it will jump twice to the next to next slide
• same happens in prev action

Header Styling

Is it possible to send the header outside of container and also the progress indicator like insta?

Completion callback

Can you add a callback function that is fired at the completion of all stories?

When are you planning on releasing V2? I see your open PR, just curious.

Component not re-rendering when using 'content' property

Managing currentIndex

How to use the currentIndex property?? It is not explained anywhere in the documentation.

clickable in header

is the clickable area in the header, possible?
Thanks

Story end callback

How can i callback once all story ended in reactjs.

multiple persons with muultiple stories

How to implement stories for multiple persons??

Passing an object instead of url

Thanks for useable package. Story type can be improved. If story props pass as not only url but also object, it will be awesome. (For example: lottie file )

how do I run project for development?

So recently I posted an issue #41
I could run the example app, but now I'm not sure how do I run the project for development. Ideally I'd want to run the example app with changes being watched in react-insta-stories package