-
Notifications
You must be signed in to change notification settings - Fork 242
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Reset Current Index when new list of stories are rendered #234
Comments
Add a new key for each Stories component will solve the issue <Stories
key={`something-unique-per-your-hole-storyView`}
className='bg-black'
currentIndex={0}
loop
keyboardNavigation
defaultInterval={8000}
stories={storyView}
width={'100vw'}
height={'100vh'}
/> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Hi, I'm using the stories as a full page solution with a nav bar on the side to toggle between a different arrays of images/videos depending on what's clicked. I'm using a state variable for the stories prop to control this.
The issue I'm having is that once I click on a new nav item, it correctly renders the new story items from the corresponding array but the index starts from where the previous one left off, instead of starting from the beginning. I've tried setting the
currentIndex
to 0 so that it will always reset on click but no luck there.Nav Items:
<li className='active:border-blue-400'> <button className="pointer-events-auto opacity-50 hover:opacity-100 active:text-white" onClick={() => setStoryState(Press)}> <span className="w-12">001</span> <span className='w-12 ml-1 mr-1'>-</span> <span>HOME</span> </button> </li> <li> <button className="pointer-events-auto opacity-50 hover:opacity-100" onClick={() => setStoryState(Archive)}> <span className="w-12">002</span> <span className='w-12 ml-1 mr-1'>-</span> <span>ARCHIVE</span> </button> </li>
Stories:
<Stories className='bg-black' currentIndex={0} loop keyboardNavigation defaultInterval={8000} stories={storyView} width={'100vw'} height={'100vh'} />
The text was updated successfully, but these errors were encountered: