早上看到几个实用的 React 工具包

皮小蛋

发布于 2020-03-02 10:55:53

6750

发布于 2020-03-02 10:55:53

文章被收录于专栏：前端皮小蛋

背景

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

正文

三个工具

分别是：

react-onclickoutside
react-lazy-load-image-component
react-toastify

1. react-onclickoutside

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

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

这个功能我们也可以自己手动加，但是要写额外的代码，用这个工具可以减少一些重复的工作量。

动态展示：

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

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

这效果，不是很好

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

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/react-lazy-load-image-component

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/react-toastify