【分享创造】react-typewriter-hook: 用react hooks来实现打字机的效果

weixin_33963594

于 2019-02-11 22:21:36 发布

阅读量201

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：https://segmentfault.com/a/1190000018119641

本文介绍了一种使用React Hooks实现打字机动画效果的方法，通过npm安装react-typewriter-hook包，可以轻松地在React应用中添加动态的打字机文字效果。此组件能够自动擦除旧单词并输入新单词。

react-typewriter-hook

⌨️ 使用react hooks来轻松实现打字机的效果

安装

npm i react-typewriter-hook --save

例子

View example at codesandbox

使用

// useTypewriter will do these things
// Once Word changed, typewritter will automatically erase last word
// Then type down new word
import useTypewriter from "react-typewriter-hook"

function MagicWriter(word) {
  const typing = useTypewriter(word)
  return typing
}