Moment Hooks: Cách Dễ nhất để làm việc với Ngày và Thời gian trong React

moment-hooks

Một mô-đun để nhóm tất cả các hooks tốt nhất cùng nhau.

Yêu cầu tiên quyết

• React 16.8 hoặc cao hơn

Cài đặt

yarn install moment-hooks

Danh sách các hooks

• useOutsideClick
• useLockBodyScroll
• useArray
• useDebounce
• useWindowSize
• useQueryStringState
• useWhyDidYouUpdate

useOutsideClick

gọi một hàm khi một sự kiện click xảy ra bên ngoài phần tử tham chiếu

Tham số

. Tham chiếu của phần tử
. Hàm được gọi khi một sự kiện click xảy ra bên ngoài phần tử tham chiếu

import { useOutsideClick } from 'moment-hooks';

const ref = React.useRef();
useOutsideClick(ref, () => console.log("On click outside"));

useArray

làm cho việc xử lý mảng state dễ dàng hơn

Tham số

. Giá trị ban đầu của mảng

import { useArray } from 'moment-hooks';

const [list, actions] = useArray(["element 1"]);

Trả về

hook trả về một mảng với hai phần tử

. Mảng được lưu trong trạng thái
. Các hành động bạn có thể thực hiện trên mảng

Hành động

. push – Thêm tham số đầu tiên của hàm vào cuối mảng
. removeIndex – Loại bỏ phần tử tại chỉ số được cung cấp như tham số đầu tiên của hàm

useLockBodyScroll

Tắt thanh cuộn trên cơ thể. Thường được sử dụng trong các modal.

Tham số

. Nếu nó nên bị ẩn. Mặc định là true.

import { useLockBodyScroll } from 'moment-hooks';

useLockBodyScroll();

hoặc nếu bạn có nó trong một modal

import { useLockBodyScroll } from 'moment-hooks';

const Modal = ({ isOpen }) => {
    useLockBodyScroll(isOpen);

    return <div>Modal</div>;
}

useDebounce

Giảm thời gian cập nhật. Hữu ích khi làm việc với fetch.

Tham số

. Giá trị cần giảm nhiễu
. Thời gian giảm nhiễu theo đơn vị mili giây. Đây là khoảng thời gian mà không có cập nhật nào được thực hiện vào inputValue để cập nhật giá trị đã được giảm nhiễu.

import { useDebounce } from 'moment-hooks';

const [inputValue, setInputValue] = React.useState("A value");
const debouncedInputValue = useDebounce(inputValue, 100);

useWindowSize

trả về kích thước của cửa sổ

import { useWindowSize } from 'moment-hooks';

const { width, height } = useWindowSize();

useSize

trả về kích thước của tham chiếu

import { useSize } from 'moment-hooks';

const { width, height } = useSize();

Tham số

. ref: một tham chiếu React

useQueryStringState

Hoạt động giống như useState chỉ khác là nó lưu trạng thái của nó trong chuỗi truy vấn của url.

Tham số

. defaultState: Hoàn toàn giống như trạng thái mặc định của useState
. Đối tượng với 2 khóa:

fromString

Một cách để tuần tự hóa chuỗi url thành một giá trị trong trạng thái

toString

Một cách để chuyển trạng thái thành chuỗi.

const [reportSettings, setReportSettings] = useQueryStringState(
        {
            from: moment()
                .subtract(1, 'months')
                .toDate(),
            to: moment().toDate(),
        },
        {
            fromString: {
                from: from => moment(from).toDate(),
                to: to => moment(to).toDate(),
            },
            toString: {
                from: from => moment(from).format(),
                to: to => moment(to).format(),
            },
        }
    );

useWhyDidYouUpdate

ghi log lý do tại sao một thành phần đã được cập nhật

Tham số

. Tên của thành phần
. Các props

import { useWhyDidYouUpdate } from 'moment-hooks';

useWhyDidYouUpdate('Register', props);

Chi tiết tải về:

Tác giả: momentechnologies
Nguồn: https://github.com/momentechnologies/moment-hooks

Giấy phép: MIT license

Cảm ơn bạn!