NEXT.jsで超簡単にタイプライターを実装
npm i react-simple-typewriter
const Hero = () => {
const [ text, count ] = useTypewriter({
words: ["Hi, The Name's Ryosuke Kamei",
"Loves-BullDog-coffee.tsx ",
"<ButLovesToCodeMore/>"],
loop: true,
delaySpeed: 2000,
})
return (
<div>
<p>{text}</p>
</div>
)
}
1.useTypewriterにwordsプロパティにタイピングしたい文字列を書く
2.繰り返して表示したいなら
loopをtrueにする
同時にloopの速度を
delaySpeedで調整する
3.後は初期値でtextに入れているwordsを呼び出すだけ
4.
<Cursor cursorColor='#F7AB0A' />
Cursorを呼び出して、cursorColorで色を指定するだけでcursorの色も簡単に変える事ができる。