如何在 React 中使用 Typed.js

React 现在是一个流行的、强大的、非常受欢迎的 Web 开发库。

今天，给大家分享以下 Typed.js在React中的使用

安装#

npm install typed.js #npm
yarn add typed.js #yarn
pnpm add typed.js #pnpm

使用#

首先引入Typed.js

import Typed from "typed.js"

为了使用Typed.js，并且让他在React中工作，我们还需要两个钩子，一个用于引入DOM元素，一个用来执行副作用。

示例#

import {useRef,useEffect} from "rect"
export default function Home(){
    const el=useRef(null);
    useEffect(()=>{
        const typed = new Typed(el.current,{
            strings: [
                "字符串1",
                "字符串2",
              ],
              startDelay: 300,
              typeSpeed: 100,
              backSpeed: 100,
              backDelay: 100,
              loop: true,
        });
        return ()=>{
            typed.destroy();
        }
    })
    return (
    <div>
            <h1 ref={el}></h1>
    </div>
    )
}