在前端开发中，我们经常需要实现打字机效果，例如在展示文字时一个一个地逐渐出现。手写打字机效果的代码会让我们的代码变得混乱，而好在有一个 npm 包 @edwellbrook/react-typewriter 可以帮助我们快速实现打字机效果。
安装
首先，我们需要安装 @edwellbrook/react-typewriter 包。使用 npm 命令行在项目目录下输入以下指令：
npm install @edwellbrook/react-typewriter --save
使用
导入
在项目文件中导入 @edwellbrook/react-typewriter：
import Typewriter from '@edwellbrook/react-typewriter';
基本应用
-- -------------------- ---- -------
-----------
------------
------ --------
----- -- - ---------- ---------
--- --- -- ---------- -- ------- --------- ------ --- --- ------ -- ----------
--
-----------
---------------------
----------
----------------
------------------ -- --------------------
--Props 说明
sentences (必选)
- 类型:
string[]
能够接受多个字符串作为数组输入，其中每个字符串都将被逐字符地打印出来。
senteneces={[
'Hello World.',
'This is a typewriter effect.',
'It can be customized to display realistic typing for any amount of content.',
]}loop (可选)
- 类型:
bool默认值:false
当 loop 为 true 时，所有的句子都会被打印，然后开始重新打印所有句子。如果 loop 为 false 则会直接停在最后一句。
loop={true}cursorColor (可选)
- 类型:
string默认值:#000
cursorColor 属性可以设置我们想要的光标颜色。
cursorColor="#F4E9CD"
delay (可选)
- 类型:
number默认值:50
delay 属性控制字符逐渐打印的速度。数值越大则打印速度越慢，数值越小则打印速度越快。
delay={70}deleteSpeed (可选)
- 类型:
number默认值:50
此属性为删除已打印字符的速度，其数值越大删除速度越快。
deleteSpeed={50}onLoopComplete (可选)
- 类型:
func
当句子循环完一次之后触发的回调函数，我们可以在这里添加自己的代码。
onLoopComplete={() => console.log('done')}示例代码
-- -------------------- ---- -------
------ ----- ---- --------
------ ---------- ---- --------------------------------
----- ----------------- - ------- -- -
----- --------- - -
----- ----------------------------- -------
--------------- --- ----
------------
--
------ -
-----
-----------
---------------------
-----------
-----------------------
----------
----------------
------------------ -- --------------------
--
------
--
-
------ ------- ------------------在你的 React 项目中输入上述代码并运行，就可以快速实现打字机效果了！如果需要个性化配置，根据代码注释自行修改即可。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055ab281e8991b448d849d