blob: 59c91b3b824ca1f38c213bb38a335f0932aa0ad0 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
|
"use client"
import { useEffect, useRef } from "react";
const letters = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
function hackType(element: HTMLElement) {
let iteration = 0;
const interval = setInterval(() => {
element.innerText = element.innerText
.split("")
.map((letter, index) => {
if (index < iteration) {
return element.getAttribute('data-value')![index];
}
return letters[Math.floor(Math.random() * 26)];
})
.join("");
if (iteration >= element.getAttribute('data-value')!.length) {
clearInterval(interval);
}
iteration += 1 / 5;
}, 20);
}
export default function HackType({ text }: { text: string }) {
const elementRef = useRef<HTMLDivElement>(null);
useEffect(() => {
if (elementRef.current) {
elementRef.current.setAttribute('data-value', text);
hackType(elementRef.current);
const interval = setInterval(() => {
hackType(elementRef.current!);
}, 10000);
document.addEventListener("visibilitychange", () => {
if (!document.hidden && elementRef.current) {
hackType(elementRef.current);
}
});
return () => clearInterval(interval);
}
}, [text]);
return (
<div ref={elementRef} className="hacktype">
{text}
</div>
);
}
|
