推荐一款极致的React文本旋转组件 - react-rotating-text
在寻找一个能为你的网站添加动态效果的React组件吗?让我们一起探索一下react-rotating-text——一个简单却功能强大的文本打字机效果组件。只需传入一串字符串数组,它就能将它们逐一展示并删除,循环往复。
项目演示与示例代码
在线预览: adrianmcli.github.io/react-rotating-text 本地运行示例:
- 首先执行
npm install
安装依赖。 - 然后运行
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为你的项目注入更多活力吧!