早上看到幾個實用的 React 工具包

背景

早上看到幾個不錯的 React 工具包， 看完之後覺得很實用，後面的一些開發任務可能我也用的上，也推薦給大家看看。

正文

三個工具

分别是：

1. react-onclickoutside

2. react-lazy-load-image-component

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

最後

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