1. 视频
- react-player: 基于原生video开发的视频播放,好处是支持jsx写法
- video-react: 高度可定制化的视频播放,推荐
<Player>
<source src={src} />
<BigPlayButton position="center" />
</Player>
2. 拖拽
- react-grid-layout:拖拽布局
3. 特效
- react-tsparticles: 粒子特效
- scrollmagic: 页面滚动到指定位置,添加特效,搭配animate.css效果更佳
var controller = new ScrollMagic.Controller();
new ScrollMagic.Scene({
triggerElement: ".instruction", //触发元素
offset: "-200" //从开始点滚动多少px触发(施法前摇)
})
.setClassToggle(".instruction .instruction-content", "fadeIn")
.addTo(controller);
4. 懒加载
- react-lazyload: 长列表懒加载,图片懒加载
<LazyLoad scroll height={300}>
<WorkItem data={item} />
</LazyLoad>
5. 其他
1.react-router-scroll-top:页面跳转滚动到顶部
<ScrollToTop>{children}</ScrollToTop>
- react-countdown: 倒计时
- flipclock: 翻页倒计时,优点是效果很赞,缺点是文档服务器挂了,只能看代码的doc文件或则快照地址
clockContructor.current = new FlipClock(clockRef.current, new Date, {
face: 'DayCounter',
countdown: true,
autoStart: false,
stopAt: new Date(),
})
有什么常用的优质库也可以推荐,持续更新中....