前端react常用插件资源

1. 视频

  1. react-player: 基于原生video开发的视频播放,好处是支持jsx写法
  2. video-react: 高度可定制化的视频播放,推荐
  <Player>
      <source src={src} />
      <BigPlayButton position="center"  />
   </Player>

2. 拖拽

  1. react-grid-layout:拖拽布局

3. 特效

  1. react-tsparticles: 粒子特效
  2. scrollmagic: 页面滚动到指定位置,添加特效,搭配animate.css效果更佳
var controller = new ScrollMagic.Controller();
new ScrollMagic.Scene({
  triggerElement: ".instruction", //触发元素
  offset: "-200" //从开始点滚动多少px触发(施法前摇)
  })
  .setClassToggle(".instruction .instruction-content", "fadeIn")
  .addTo(controller);

4. 懒加载

  1. react-lazyload: 长列表懒加载,图片懒加载
 <LazyLoad scroll height={300}>
      <WorkItem data={item} />
 </LazyLoad>

5. 其他

1.react-router-scroll-top:页面跳转滚动到顶部

<ScrollToTop>{children}</ScrollToTop>
  1. react-countdown: 倒计时
  2. flipclock: 翻页倒计时,优点是效果很赞,缺点是文档服务器挂了,只能看代码的doc文件或则快照地址
clockContructor.current = new FlipClock(clockRef.current, new Date, {
      face: 'DayCounter',
      countdown: true,
      autoStart: false,
      stopAt: new Date(),
    })

有什么常用的优质库也可以推荐,持续更新中....

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容