推荐一款极致的React文本旋转组件 - react-rotating-text

推荐一款极致的React文本旋转组件 - react-rotating-text

react-rotating-text📝 A simple react component to display an array of words/sentences with a typewriter effect.项目地址:https://gitcode.com/gh_mirrors/re/react-rotating-text

在寻找一个能为你的网站添加动态效果的React组件吗？让我们一起探索一下react-rotating-text——一个简单却功能强大的文本打字机效果组件。只需传入一串字符串数组，它就能将它们逐一展示并删除，循环往复。

项目演示与示例代码

在线预览: adrianmcli.github.io/react-rotating-text 本地运行示例：

1. 首先执行 npm install 安装依赖。
2. 然后运行 npm start，浏览器会自动打开 localhost:8000，展示实时构建的示例。

安装与使用

• 在你的项目中通过NPM安装：

npm install react-rotating-text --save

• 在React应用中直接引入：

var ReactRotatingText = require('react-rotating-text');
<ReactRotatingText items={['first', 'second', 'third']} />

为了实现闪烁的光标效果，请参考提供的CSS代码，并在项目中添加对 .react-rotating-text-cursor 类的支持。

功能特性

• items（数组）：默认值：['first', 'second', 'third']，用于设置要轮播的文本数组。
• color（字符串）：默认值：'inherit'，指定文本颜色。
• cursor（布尔值）：默认值：true，启用或禁用光标显示。
• pause（整数）：默认值：1500，文本完全显示后暂停的时间（毫秒）。
• emptyPause（整数）：默认值：1000，清空屏幕后暂停的时间（毫秒）。
• eraseMode（字符串）：默认值：'erase'，指定删除模式，可选值为 'erase' 或 'overwrite'。
• typingInterval（整数）：默认值：50，每次输入间隔时间（毫秒）。
• deletingInterval（整数）：默认值：50，每次删除间隔时间（毫秒）。

此外，还提供四个事件回调函数，允许你在不同阶段进行自定义操作：

• onTypingStart：开始输入时触发。
• onTypingEnd：完成输入时触发。
• onDeletingStart：开始删除时触发。
• onDeletingEnd：完成删除时触发。

开发与贡献

源码位于 src 目录下，已经编译好的CommonJS版本放在 lib 中，可以直接在Node.js、Browserify和Webpack项目中使用。UMD打包文件在 dist 目录下，无需任何构建系统即可直接引用。

开发过程中，可以运行 npm start 启动服务并实时监控示例和组件源码；若仅需监听 src 并自动更新 lib ，则使用 npm run watch。

许可协议

本项目遵循MIT许可证，详情见LICENSE文件。

结论

无论你是想要提升用户体验，还是单纯地想给网站增添一些视觉趣味性，react-rotating-text都是一个值得尝试的选择。其简洁的API、丰富的配置选项以及易于集成的特点，将帮助你快速实现动态文本展示的效果。立即加入，让react-rotating-text为你的项目注入更多活力吧！

react-rotating-text📝 A simple react component to display an array of words/sentences with a typewriter effect.项目地址:https://gitcode.com/gh_mirrors/re/react-rotating-text