背景

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

正文

三个工具

分别是：

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

1. react-onclickoutside

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

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

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

动态展示：

Live Demo:

https://codesandbox.io/s/gift...

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...

2. react-lazy-load-image-component

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

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

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

加载完之前会展一个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...

3. react-toastify

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

直接看效果：

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

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...

最后

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

参考文章：

5 Awesome React.js Libraries You Should Know About