推薦3個實用的 React 工具包

背景

早上看到幾個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...

最後

感興趣的能夠看看, 但願你們用得上。

參考文章：
Gif 製做工具下載：https://getkap.co/

5 Awesome React.js Libraries You Should Know About