Comments (8)
I couldn't find this in the types or docs, but onStoryStart
is passed the current index.
Here's a naive example with this in mind:
const StoryReel = ({stories}) => {
const visibleIndex = React.useRef(0);
const [selectedIndex, setSelectedIndex] = React.useState(0);
const onStoryStart = (index: number) => {
visibleIndex.current = index;
};
const onNext = () => {
const i = visibleIndex.current + 1;
visibleIndex.current = i;
setSelectedIndex(i);
};
const onPrevious = () => {
const i = visibleIndex.current - 1;
visibleIndex.current = i;
setSelectedIndex(i);
};
return (
<div>
<button type="button" onClick={onPrevious}>
Previous
</button>
<div>
<Stories
onStoryStart={onStoryStart}
stories={stories}
currentIndex={selectedIndex}
/>
</div>
<button type="button" onClick={onNext}>
Next
</button>
</div>
)
}
from react-insta-stories.
Hey, do we have this feature now?
from react-insta-stories.
Hello @oqx , thanks for suggesting a solution here. The next()
and prev()
API was part of an older version of the component but was deprecated to a more prop-based solution. What you've implemented is what I had imagined someone doing if they needed this feature. Maybe I missed including this in the docs - can you raise a PR that includes this example under a new section under the 'Usage' section. This can be named as 'Recipes'.
from react-insta-stories.
@mohitk05 Awesome. I also updated my example because I just realized onStoryStart
is a better approach.
I'll try to find time to raise a PR with this update.
It might be worth adding this to the types as well.
from react-insta-stories.
@mohitk05 There is a slight gotcha. I'm not sure if it's a bug or not, but onStoryStart
only seems to fire when I coerce a change by passing a new index into Stories
. It doesn't fire when a story completes its interval. onStoryEnd
does fire consistently on end.
from react-insta-stories.
Hi @mohitk05 I'm trying to raise a PR to fix the onStoryStart
issue but I don't have access rights to the repo. I'll also raise one for types + docs if you can add me. Thanks!
from react-insta-stories.
Hey, @oqx you'll have to fork the repository and then create a new branch in your fork and make the changes. Then you'll be able to point your branch to the main repository's master.
from react-insta-stories.
Ayyee, gotcha! Thanks.
from react-insta-stories.
Related Issues (20)
- Feature Request: Access to currentIndex from within onNext and onPrevious callbacks
- Shows Loading Spinner Constantly HOT 6
- Is the project abandoned? HOT 4
- drag to left or right for load new stoies object
- Not able to Mute the Video File
- Is Paused prop not working HOT 3
- Videos do not load/play on safari
- Warning: ReactInstaStories: Support for defaultProps will be removed HOT 1
- Support HLS format
- Typings for `width` and `height` props HOT 2
- Storystyles not working
- IOS: after a pause the next story is played
- how can i pass the content to the video, like for images we use content prop?
- I got some doubts about the project
- Progress style not rounded properly on early time HOT 2
- the video doesn't work is i give youtube link as source
- Video doesn't work on IOS, never loads HOT 1
- ios device design issue on first time video story load
- react-insta-stories support for Arabic directional styling
- Change "hitbox" of the tap to go forward/back HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-insta-stories.