File size: 896 Bytes
2485dd8 |
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 |
import Box from '@mui/material/Box';
import {useEffect, useState} from 'react';
type Props = {
intervalMs: number;
children: React.ReactNode;
shouldBlink: boolean;
// display?: 'block' | 'inline' | 'inline-block';
};
export default function Blink({
// display = 'inline-block',
shouldBlink,
intervalMs,
children,
}: Props): React.ReactElement {
const [cursorBlinkOn, setCursorBlinkOn] = useState(false);
useEffect(() => {
if (shouldBlink) {
const interval = setInterval(() => {
setCursorBlinkOn((prev) => !prev);
}, intervalMs);
return () => clearInterval(interval);
} else {
setCursorBlinkOn(false);
}
}, [intervalMs, shouldBlink]);
return (
<Box
component="span"
sx={{
display: 'inline-block',
visibility: cursorBlinkOn ? 'visible' : 'hidden',
}}>
{children}
</Box>
);
}
|