function to toggle next or previous slide

[nikitashaban]

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.

[coolbeatz71]

Hey, do we have this feature now?

[oqx]

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

[mohitk05]

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'.

[oqx]

@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.

[oqx]

@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.

[oqx]

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!

[mohitk05]

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.

[oqx]

Ayyee, gotcha! Thanks.