Hướng Dẫn Tạo Dropbox Tùy Chỉnh Với Next.js 14 Và TypeScript

Trong bài viết này, chúng ta sẽ tìm hiểu cách tạo một Dropbox (hộp thả) tùy chỉnh sử dụng Next.js 14 và TypeScript. Dropbox mà chúng ta đang đề cập sẽ có khả năng xuất hiện ở nhiều vị trí khác nhau trên màn hình, tùy thuộc vào vị trí của nó, giúp cải thiện trải nghiệm người dùng cho dropdown và autocomplete.

1. Giới Thiệu Về Component Dropbox

Component Dropbox được thiết kế để có thể hiển thị nội dung (dropbox content) bằng cách sử dụng createPortal. Chúng ta sẽ sử dụng useId từ React 19 để tự động tạo ID cho các phần tử. Logistic của component sẽ được xử lý thông qua một hook riêng biệt, cho phép người dùng tương tác dễ dàng hơn với giao diện.

1.1 Cấu Trúc Component

Dưới đây là cấu trúc cơ bản của component Dropbox:

import { $Master } from '@/libs';
import { L } from '@/libs/es';
import cx from 'classnames';
import { isEmpty } from 'lodash';
import React, { cloneElement, memo, useId } from 'react';
import { createPortal } from 'react-dom';
import useLogic from './logic';
import styles from './styles.module.scss';

// Định nghĩa kiểu props
interface $Props {...
}

function Dropdown(props: $Props) {
    const {...} = props;

    const args = useLogic({ keyId });
    const { onToggle, position, show } = args;

    return cloneElement(...);
}

export default memo(Dropdown);

Hoạt động chính của component này là giữ vị trí và trạng thái hiển thị của dropbox dựa vào các tính toán từ hook.

2. Logic Xử Lý Hiện Trạng

Chúng ta sẽ viết một hook để xử lý logic việc hiển thị box. Hook này sẽ xác định vị trí của dropbox và tự động điều chỉnh khi màn hình thay đổi:

import { debounce } from 'lodash';
import React, { CSSProperties, useEffect, useState } from 'react';

export default function useLogic({ keyId }: { keyId: string; }) {
    // Trạng thái hiển thị và vị trí
}

3. Các Sự Kiện

Mỗi khi sự kiện như cuộn chuột hay thay đổi kích thước xảy ra, chúng ta sẽ cập nhật vị trí của dropbox. Điều này giúp dropbox luôn được định vị chính xác trên màn hình:

type $Args = {
    keyId: string;
};
// Lắng nghe các sự kiện
export const $listenEvent = {...}

4. CSS Đơn Giản

Để đảm bảo giao diện đẹp và dễ sử dụng, chúng ta sẽ sử dụng SCSS cho các lớp CSS của component:

.Dropbox {
    display: flex;
}
.DropContent {
    position: fixed;
    z-index: 999;
    min-height: 250px;
    display: flex;
}

5. Cách Sử Dụng Component

Dưới đây là một ví dụ về cách sử dụng component Dropbox mà chúng ta đã tạo:

<L.Dropbox
    {...{
        setting: {...},
        impact(args) {...},
        contents({...}) {...},
    }}
/>

Kết Luận

Với hướng dẫn này, bạn đã có thể tạo ra một Dropbox tùy chỉnh với Next.js 14 và TypeScript. Hi vọng bài viết này hữu ích cho bạn trong việc xây dựng các giao diện người dùng thân thiện và linh hoạt!
source: viblo