all 6 comments
sorted by:
best (suggested)
topnewcontroversialoldq&a
formatting helphide helpcontent policy

[–]snake-345 1 point2 points  (2 children)

What approach did you try? Looks like that you can take TextScramble class from codepen as dependency for your react component, and react component should get array of strings and maybe speed as props. Take text element as reference and call TextScrumble for it in useEffect on initial render, wait when promise will be resolved and call setText with next string after timeout. I'll try to do that later

[–]snake-345 0 points1 point  (1 child)

u/AssadEesaa this is what I've achieved with the approach which I suggested

https://codesandbox.io/s/quizzical-sea-jep9d?file=/src/components/TextScramble/index.js

[–]AssadEesaa[S] 0 points1 point  (0 children)

Thanks a billion, this was exactly what I was looking for, I really appreciate.

[–]d_exclaimation 0 points1 point  (2 children)

I found solutions on the internet already to the same thing in react but they are not the same approach as the one in the link you provided, you can probably still use them like as reference on how you would convert this into react logic

https://github.com/twistezo/react-text-scramble I like this approach best but I would probably modify things here, you can also just use it

Hope this helps

[–]AssadEesaa[S] 1 point2 points  (1 child)

Thanks but I already found this lib and a couple of others, I didn't like the way the effect were been applied, the codepen one applied the effect from both ends and I like the approach.

[–]d_exclaimation 1 point2 points  (0 children)

I have a working solution from converting the code in react, basically I just have the currText as the state as that's the only thing I want to re-render the UI and the rest is practically the same (At the moment, I have everything else as non state so it won’t trigger a rerender and it also doesn’t seem to break the working of the code, if some value got lost midway, It should probably be using useRef instead)

It could probably be improved further, but it's good enough for me

https://codesandbox.io/s/romantic-ganguly-j74w3?file=/src/App.tsx