-
Notifications
You must be signed in to change notification settings - Fork 0
/
TypeIn.tsx
71 lines (64 loc) · 2 KB
/
TypeIn.tsx
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
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
"use client";
import Link from "next/link";
import {ReactElement, useEffect, useState} from "react";
import { useInterval } from "src/hooks/setInterval";
type Props = { text: string[]; aniLength: number };
export default function TypeIn({ text, aniLength }: Props) {
const fullText = text.join("");
const [delay, setDelay] = useState<number | null>(
aniLength / fullText.length
);
const [displayedText, setDisplayedText] = useState<ReactElement[][]>(() =>
text.map((stringArr) =>
stringArr.split("").map((letter) => (
<span key={crypto.randomUUID()} style={{ opacity: "0" }}>
{letter}
</span>
))
)
);
useEffect(() => {
if (text.length <= 0) throw Error("CAN NOT TYPE IN NOTHING");
}, [text]);
const [numPrintedLetter, setNumPrintedLetter] = useState<number>(0);
const [numPrintedStrings, setNumPrintedStrings] = useState<number>(0);
useInterval(() => {
if (numPrintedLetter < text[numPrintedStrings].length) {
// Here is the place where code per character is executed
setDisplayedText((prevText) => {
prevText[numPrintedStrings][numPrintedLetter] = (
<span
key={prevText[numPrintedStrings][numPrintedLetter].key}
style={{ opacity: "1.0" }}
>
{prevText[numPrintedStrings][numPrintedLetter].props.children}
</span>
);
return prevText;
});
setNumPrintedLetter(numPrintedLetter + 1);
} else {
// subtract one to compensate for 0 index
if (numPrintedStrings >= text.length - 1) {
setDelay(null);
} else {
setNumPrintedLetter(0);
setNumPrintedStrings(numPrintedStrings + 1);
}
}
}, delay);
return (
<>
<h1 className="pt-[max(76px,32vh)]">
<span>{displayedText[0]}</span>
<Link
href="/contact"
className="text-stroke
transition-all ease-in-out duration-300"
>
{displayedText[1]}
</Link>
</h1>
</>
);
}