NEXT.jsで超簡単にタイプライターを実装

公開日
2023-02-21
投稿者
Ryousuke Kamei
#tag

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の色も簡単に変える事ができる。