3个实用的 React 工具包

早上看到几个React 工具包, 看完之后觉得很不错,刚好我后面的一些开发任务也需要用到, 推荐给大家看看。

三个工具

分别是:

  1. react-onclickoutside
  2. react-lazy-load-image-component
  3. react-toastify

1. react-onclickoutside

包如其名, 就是处理点击到元素外部的时候,需要处理的一些事件。

常见于点击容器外部的空白的时候.

这个功能我们也可以自己手动加, 用这个工具可以减少一些重复的工作量

动态展示:

1.gif

Live Demo:

https://codesandbox.io/s/gifted-fast-i13xy

Code:

import React, { useState } from "react";
import onClickOutside from "react-onclickoutside";
 
const Menu = () => {
  const [isOpen, setIsOpen] = useState(false);
  const toggle = () => setIsOpen(!isOpen);
  Menu.handleClickOutside = () => setIsOpen(false);
  return (
      //...
  )
};
 
const clickOutsideConfig = {
  handleClickOutside: () => Menu.handleClickOutside
};
 
export default onClickOutside(Menu, clickOutsideConfig);

支持多种用法和引入方式, 十分不错。

包地址: https://www.npmjs.com/package/react-onclickoutside

2. react-lazy-load-image-component

这个包也非常实用, 比如我们系统中有图片列表,不错任何处理的时候, 就是图片加载完了就突然出现, 没有加载完的就是空白:

2.gif

以前, 我们的优化方式是, 放一个菊花, 或者其他的图占位, 加载好了再显示。

react-lazy-load-image-component展示的官方效果如下:

3.gif

加载完之前会展一个blur效果的图片, 整体加载完之后也不会很突兀,
体验比较好。

Code:

import React from 'react';
import { LazyLoadImage } from 'react-lazy-load-image-component';
import 'react-lazy-load-image-component/src/effects/blur.css';
 
const MyImage = ({ image }) => (
  <LazyLoadImage
    alt={image.alt}
    effect="blur"
    src={image.src} />
);

npm 地址: https://www.npmjs.com/package/react-lazy-load-image-component

3. react-toastify

最后一个是toast, 也非常实用。

直接看效果:

4.gif

提及小,而且支持自定义。

5.png

Code Demo:

import { ToastContainer, toast } from 'react-toastify'
import 'react-toastify/dist/ReactToastify.css'

toast.configure({
 autoClose: 2000,
 draggable: false,
 position: toast.POSITION.TOP_LEFT
})

const notify = () => toast('Wow so easy !')

const App = () => (
 <div className="App">
   <button onClick={notify}> Notify !</button>
 </div>
)

npm 地址: https://www.npmjs.com/package/react-toastify

最后

感兴趣的可以看看, 希望大家用得上。

参考文章:
Gif 制作工具下载:https://getkap.co/

5 Awesome React.js Libraries You Should Know About

本文转载自:https://segmentfault.com/a/1190000021854868

更多网站前端开发知识,请查阅 HTML中文网 !!

以上就是3个实用的 React 工具包的详细内容,更多请关注web前端其它相关文章!

赞(0) 打赏
未经允许不得转载:web前端首页 » JavaScript 教程

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏