Cách dễ nhất để nghe sự kiện nhấp chuột bên ngoài các thành phần với React

REACT COOL ONCLICKOUTSIDE

Đây là một thư viện React hook để kích hoạt callback khi người dùng nhấp chuột bên ngoài khu vực của các thành phần mục tiêu. Đây là một logic hữu ích cho thiết kế tương tác giao diện người dùng (IxD) như đóng một menu thả xuống, hộp thoại hoặc gợi ý công cụ và cùng nhiều trường hợp sử dụng khác. Bạn có thể kiểm tra phần tính năng để biết thêm chi tiết.

⚡️ Xem trực tiếp: https://react-cool-onclickoutside.netlify.app

Thích nó? ⭐️ Đánh giá trên GitHub hoặc Tweet về nó.

Tính năng

• 🎣 Nghe sự kiện nhấp chuột bên ngoài dựa trên React hook.
• 👯‍♀️ Hỗ trợ nhiều refs để bao phủ nhiều trường hợp sử dụng hơn.
• 🧻 Sử dụng passive event listeners để cải thiện hiệu suất cuộn trang.
• ⛔ Thanh cuộn có thể được loại trừ khỏi callback của sự kiện nhấp chuột bên ngoài.
• 🙈 Bỏ qua một số phần tử cụ thể trong vòng lặp sự kiện.
• 🙉 Cho phép bạn ngừng nghe sự kiện nhấp chuột bên ngoài khi cần.
• 🪟 Phát hiện sự kiện nhấp chuột trên iframe để cải thiện trải nghiệm phát triển.
• 🔩 Hỗ trợ refs tùy chỉnh cho một số lý do.
• 📜 Hỗ trợ TypeScript định nghĩa kiểu.
• 🗄️ Tương thích với việc render từ phía máy chủ.
• 🦔 Kích thước nhỏ (< 1kB gzipped). Không có phụ thuộc ngoại cả, ngoại trừ react.

Yêu cầu

Để sử dụng react-cool-onclickoutside, bạn cần sử dụng react@16.8.0 hoặc phiên bản mới hơn có hỗ trợ hooks.

Cài đặt

Gói này được phân phối qua npm.

$ yarn add react-cool-onclickoutside
# or
$ npm install --save react-cool-onclickoutside

Cách sử dụng

Trường hợp sử dụng phổ biến.

import { useState } from "react";
import useOnclickOutside from "react-cool-onclickoutside";

const Dropdown = () => {
  const [openMenu, setOpenMenu] = useState(false);
  const ref = useOnclickOutside(() => {
    setOpenMenu(false);
  });

  const handleClickBtn = () => {
    setOpenMenu(!openMenu);
  };

  return (
    <div>
      <button onClick={handleClickBtn}>Button</button>
      {openMenu && <div ref={ref}>Menu</div>}
    </div>
  );
};

Hỗ trợ nhiều refs. Callback chỉ được kích hoạt khi người dùng nhấp chuột bên ngoài các thành phần đã đăng ký.

import { useState } from "react";
import useOnclickOutside from "react-cool-onclickoutside";

const App = () => {
  const [showTips, setShowTips] = useState(true);
  const ref = useOnclickOutside(() => {
    setShowTips(false);
  });

  return (
    <div>
      {showTips && (
        <>
          <div ref={ref}>Tooltip 1</div>
          <div ref={ref}>Tooltip 2</div>
        
      )}
    </div>
  );
};

Bỏ qua Phần tử bằng Tên Lớp CSS

Bạn có thể yêu cầu react-cool-onclickoutside bỏ qua một số phần tử trong vòng lặp sự kiện bằng tên lớp CSS ignore-onclickoutside. Nếu bạn muốn kiểm soát cụ thể tên lớp, hãy sử dụng tùy chọn ignoreClass.

import { useState } from "react";
import useOnclickOutside from "react-cool-onclickoutside";

// Use the default CSS class name
const App = () => {
  const ref = useOnclickOutside(() => {
    // Do something...
  });

  return (
    <div>
      <div ref={ref}>I'm a 🍕</div>
      <div>Click me will trigger the event's callback</div>
      <div className="ignore-onclickoutside">
        Click me won't trigger the event's callback
      </div>
    </div>
  );
};

// Use your own CSS class name
const App = () => {
  const ref = useOnclickOutside(
    () => {
      // Do something...
    },
    {
      ignoreClass: "my-ignore-class", // Or ["class-1", "class-2"]
    }
  );

  return (
    <div>
      <div ref={ref}>I'm a 🍕</div>
      <div>Click me will trigger the event's callback</div>
      <div className="my-ignore-class">
        Click me won't trigger the event's callback
      </div>
    </div>
  );
};

Vô hiệu hóa Bộ lắng nghe Sự kiện

Trong trường hợp bạn muốn vô hiệu hóa bộ lắng nghe sự kiện vì lý do hiệu suất hoặc để đáp ứng một số trường hợp sử dụng. Chúng tôi cung cấp tùy chọn disabled cho bạn. Khi bạn đặt nó thành true, callback sẽ không được kích hoạt.

import { useState } from "react";
import useOnclickOutside from "react-cool-onclickoutside";

const App = () => {
  const [disabled, setDisabled] = useState(false);
  const ref = useOnclickOutside(
    () => {
      // Do something...
    },
    { disabled }
  );

  const handleBtnClick = () => {
    setDisabled(true);
  };

  return (
    <div>
      <button onClick={handleBtnClick}>
        Stop listening for outside clicks
      </button>
      <div ref={ref}>I'm a 🍎</div>
    </div>
  );
};

Sử dụng ref Riêng của Bạn

Trong trường hợp bạn đã có một ref hoặc bạn muốn chia sẻ một ref cho mục đích khác. Bạn có thể truyền ref thay vì sử dụng ref được cung cấp bởi hook này.

const ref = useRef();

useOnclickOutside(
  () => {
    // Do something...
  },
  { refs: [ref] }
);

Phát hiện Sự kiện Nhấp chuột trên Iframe

Phương án làm việc được đề cập ở trên có nhược điểm của nó:

• Nhấp chuột trên một iframe chỉ sẽ kích hoạt callback được cung cấp một lần. Nhấp chuột tiếp theo trên iframe sẽ không kích hoạt callback cho đến khi chú ý đã được chuyển về cửa sổ chính.
• Di chuyển chú ý đến iframe qua điều hướng bằng bàn phím cũng kích hoạt callback được cung cấp.

Để tiện lợi cho chúng ta, tính năng này đã được bật mặc định. Bạn có thể tắt nó tùy chọn bằng cách đặt detectIFrame thành false nếu bạn thấy nó xung đột với trường hợp sử dụng của bạn.

API

const ref = useOnclickOutside(callback: (event: Event) => void, options?: object);

Bạn phải đăng ký ref và truyền callback để sử dụng hook này. Hơn nữa, bạn có thể truy cập vào đối tượng event thông qua tham số của callback, mặc định sẽ là MouseEvent hoặc TouchEvent.

const callback = (event) => {
  console.log("Event: ", event);
};

Đối tượng options chứa các khóa sau.

Bài viết / Bài đăng trên Blog

💡 Nếu bạn đã viết bất kỳ bài đăng blog hoặc bài viết nào về react-cool-onclickoutside, vui lòng mở một PR để thêm nó vào đây.

• Nổi bật trên React Status #172.

Chi tiết tải về:

Tác giả: wellyshen
Nguồn: https://github.com/wellyshen/react-cool-onclickoutside

Giấy phép: MIT license