43 lines
1.3 KiB
React
43 lines
1.3 KiB
React
|
import React, { Fragment, useEffect, useState } from 'react'
|
||
|
|
|
||
|
|
let timer = 0;
|
||
|
|
let keyNum = 0;
|
||
|
|
let textTimeout;
|
||
|
|
let chars = ("abcdefghijklmnopqrstuvwxyz1234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ!@#$%^&*()_+=-;.,/?><][}{:`~").split("");
|
||
|
|
|
||
|
|
const TextShuffler = ({ textInput }) => {
|
||
|
|
|
||
|
|
let [text, setText] = useState(textInput);
|
||
|
|
let [refresh, setRefresh] = useState(0);
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
|
||
|
|
let shuffledText = () => {
|
||
|
|
let textArray = textInput.split("");
|
||
|
|
let newTextArray = [];
|
||
|
|
textArray.forEach(char => {
|
||
|
|
if (char === " ") {
|
||
|
|
return newTextArray.push(" ")
|
||
|
|
}
|
||
|
|
newTextArray.push(chars[Math.floor(Math.random() * 85)])
|
||
|
|
})
|
||
|
|
|
||
|
|
return newTextArray.join("");
|
||
|
|
}
|
||
|
|
|
||
|
|
textTimeout = setTimeout(() => {
|
||
|
|
if (timer === 7) {
|
||
|
|
setText(textInput);
|
||
|
|
return window.clearTimeout(textTimeout);
|
||
|
|
};
|
||
|
|
setText(prev => prev);
|
||
|
|
setRefresh(prev => prev + 1);
|
||
|
|
timer++
|
||
|
|
}, 200);
|
||
|
|
}, [refresh])
|
||
|
|
|
||
|
|
return (<span className="shuffled-text-span">{text.split("").map(char => <span key={keyNum++} style={{ animationDelay: Math.random() + "s", animationDuration: (Math.random() * 2) + "s" }}>{char}</span>)}</span>)
|
||
|
|
}
|
||
|
|
|
||
|
|
export default TextShuffler
|