Dễ dàng Theo dõi Sự kiện Chuột trên Các Phần Tử Được Chọn với React Hooks

React Mighty Mouse

Hook React để theo dõi sự kiện chuột trên phần tử được chọn.

Demo

Demos được tạo với React DemoTab 📑

Cài đặt

npm install react-hook-mighty-mouse

Tính năng

• Nhẹ, không phụ thuộc vào thư viện bên ngoài 📦
• Hỗ trợ sự kiện chuột và chạm vào màn hình
• Vị trí chuột 🖱️ – client/page/screen 🔗demo
• Vị trí tương đối của chuột đối với phần tử được chọn 🔗demo
• Góc của chuột 0-360° 📐 tương đối đối với phần tử được chọn 🔗demo – Theo dõi đôi mắt 👀 🔗demo
• Theo dõi sự kiện nút chuột 🔗demo
• Phát hiện khi chuột di chuyển qua phần tử được chọn 🔗demo
• Phát hiện các phím được nhấn trên bàn phím ⌨️ 🔗demo

Ví dụ

import React from 'react';
import useMightyMouse from 'react-hook-mighty-mouse';

const App = () => {
  const { position } = useMightyMouse();
  return (
    <div>
      Mouse position x:{position.client.x} y:{position.client.y}
    </div>
  );
};

ReactDOM.render(<App />, document.getElementById('root'));

Hook

useMightyMouse(
  touchEnabled: boolean = true,
  selectedElementId: string | null = null,
  selectedElementOffset: { x: number; y: number } = { x: 0, y: 0 }
  ): Mouse

▶︎ chỉ ra giá trị mặc định nếu có

Tham số đầu vào

touchEnabled : boolean ▶︎ true
Giá trị boolean để bật/tắt chạm vào màn hình.

selectedElementId : string | null ▶︎ null
Id phần tử được chọn.

selectedElementOffset : { x: number; y: number } ▶︎ { x: 0, y: 0 }
Đối tượng offset của phần tử được chọn.

Giá trị trả về

_ Chuột = {
position : {
client : { x : number | null, y : number | null },
screen : { x : number | null; y : number | null },
page : { x : number | null; y : number | null },
},
buttons : {
left : boolean | null,
middle : boolean | null,
right : boolean | null,
},
keyboard : {
ctrl : boolean | null,
shift : boolean | null,
alt : boolean | null,
},
eventType : string | null,
selectedElement : {
position : { x : number | null; y : number | null, angle : number | null },
boundingRect : { left : number | null; top : number | null, width : number | null, height : number | null },
isHover : boolean_
},
}

Phát triển

Dễ dàng thiết lập môi trường phát triển cục bộ!

Xây dựng tất cả các ví dụ và khởi chạy máy chủ storybook trên localhost:9009:

• sao chép
• npm install
• npm start

HOẶC

Sao chép repo này trên máy tính của bạn, điều hướng đến vị trí của nó trong cửa sổ terminal và chạy:

npm install
npm link # link your local repo to your global packages
npm run build:watch # build the files and watch for changes

Sao chép repo dự án mà bạn muốn kiểm tra với thư viện react-hook-mighty-mouse và chạy:

npm install
npm link react-hook-mighty-mouse # link your local copy into this project's node_modules
npm start

Bắt đầu lập trình! 🎉

Đóng góp

Chúng tôi hoan nghênh mọi đóng góp!

Lộ trình phát triển

• Thêm tham số throttle (hook “updating”)

Chi Tiết Tải Xuống:

Tác Giả: mkosir
Mã Nguồn: https://github.com/mkosir/react-hook-mighty-mouse

Giấy Phép: MIT license