mirror of
https://github.com/roleypoly/roleypoly.git
synced 2025-06-18 02:19:09 +00:00
chore: restructure project into yarn workspaces, remove next
This commit is contained in:
parent
49e308507e
commit
8d06327c03
266 changed files with 16466 additions and 3350 deletions
37
packages/design-system/atoms/typist/Typist.tsx
Normal file
37
packages/design-system/atoms/typist/Typist.tsx
Normal file
|
@ -0,0 +1,37 @@
|
|||
import * as React from 'react';
|
||||
|
||||
type TypistProps = {
|
||||
resetTimeout: number;
|
||||
charTimeout: number;
|
||||
lines: string[];
|
||||
};
|
||||
|
||||
export const Typist = (props: TypistProps) => {
|
||||
const [outputText, setOutputText] = React.useState('');
|
||||
const [currentLine, setCurrentLine] = React.useState(0);
|
||||
|
||||
React.useEffect(() => {
|
||||
const fullLine = props.lines[currentLine];
|
||||
|
||||
if (outputText === fullLine) {
|
||||
const timeout = setTimeout(() => {
|
||||
setOutputText('');
|
||||
setCurrentLine((currentLine + 1) % props.lines.length);
|
||||
}, props.resetTimeout);
|
||||
|
||||
return () => {
|
||||
clearTimeout(timeout);
|
||||
};
|
||||
}
|
||||
|
||||
const timeout = setTimeout(() => {
|
||||
setOutputText(fullLine.slice(0, outputText.length + 1));
|
||||
}, props.charTimeout);
|
||||
|
||||
return () => {
|
||||
clearTimeout(timeout);
|
||||
};
|
||||
}, [currentLine, outputText]);
|
||||
|
||||
return <>{outputText}</>;
|
||||
};
|
Loading…
Add table
Add a link
Reference in a new issue