526互联

在React中使用`typeit`库

发布时间 2023-11-23 10:30:33作者: 分页需带参

在React中使用typeit库

安装

npm install typeit-react

在需要用到的组件导入，使用

import TypeIt from "typeit-react";

const text () => {
  return (
    <div>
      <TypeIt>文字打字效果</TypeIt>
    </div>
  );
};

export default text

使用option方式配置属性

import TypeIt from "typeit-react";

const text () => {
  return (
    <div>
       <TypeIt
        options={{
          strings: ["文字打字效果"],
          speed: 10,
          waitUntilVisible: true,
          //loop:false
        }}
      />
    </div>
  );
};

export default text

还可以用到周期函数

例如：让每次打字都把游标去掉

<TypeIt
   getBeforeInit={(instance) => {
   instance
   .type('文字打字效果')
   .pause(750)
   .delete(3)
   .pause(500)
   .type('字效果')
   return instance
   }}
   getAfterInit={(instance) => {
   instance.destroy()
   }}
  />