braposo / react-text-loop

Animate words in your headings
https://codesandbox.io/s/react-text-loop-playground-br4q1
MIT License
878 stars 65 forks source link

Don't loop the text #49

Closed lightninglu10 closed 4 years ago

lightninglu10 commented 4 years ago

Hey guys, is there a way to not loop the text? Just go through the array and stop?

eggsy84 commented 4 years ago

A little workaround..... using the timings array and set the time for your last element to be long enough that people wont see it

braposo commented 4 years ago

hey @lightninglu10, thanks for your question.

You can use the interval option to control the behaviour of the loop.

If you have a timeout that set the interval to 0 after a options * interval amount of time it should work.

useEffect(() => {
    const intervalStopTimeout = setTimeout(() => {
      setInterval(0);
      console.log("stop");
    }, options.length * interval); // this is what you should customise

    return () => {
      clearTimeout(intervalStopTimeout);
    };
}, []);

See the "Controlled" example in the playground for inspiration: https://codesandbox.io/s/react-text-loop-playground-br4q1?file=/src/App.tsx:2157-3303

braposo commented 4 years ago

@lightninglu10 going to close this but aiming to include more explicit options to control the number of loops in the plans for v3

shamoons commented 3 years ago

Any update?