Components props name rule

Unifying the naming of props in react components helps make the codebase clear and easy to understand for both you and the people working with you.

Here are some suggestions for naming props from Radix UI:

• Use descriptive names: Prop names should accurately reflect their purpose. For example, isOpen to indicate the open/closed state of a modal, and size to specify the size of an element.

• Use camelCase: This is a common naming convention in JavaScript and React. For instance, backgroundColor and fontSize.

• Avoid abbreviations: Use full words to prevent confusion.

Tránh các trường hợp cùng 1 tính năng nhưng tên khác nhau, vd như isNewTab !== newTab, backgroundColor !== bgColor

Props liên quan đến trạng thái

isOpen: Xác định xem một modal, dropdown hay một phần tử tương tác khác có đang mở hay không.

isDisabled: Xác định xem một phần tử có bị vô hiệu hóa hay không.

isLoading: Xác định xem một quá trình nào đó có đang tải hay không.

delayDuration : Thời gian trễ

Props liên quan đến giao diện

type: Loại

className: Để áp dụng các class CSS tùy chỉnh.

style: Để áp dụng các style trực tiếp bằng JavaScript.

color: Để đặt màu cho các phần tử.

size: Để đặt kích thước cho các phần tử

variant : Để xác định loại button (primary, secondary, ...)

align : Căn chỉnh so với ... (start, center, end)

side : Vị trí so với ... (top, bottom, left, right).

Props liên quan đến sự kiện

onClick: Xử lý sự kiện khi người dùng click vào một phần tử.

onChange: Xử lý sự kiện khi giá trị của một input thay đổi.

onKeyDown: Xử lý sự kiện khi người dùng nhấn một phím trên bàn phím.

defaultOpen : Giá trị mặc định khi khởi tạo.

onValueChange : Callback được gọi khi giá trị thay đổi.

onOpenChange : Callback được gọi khi trạng thái mở thay đổi.

Props liên quan đến Contents

tagline :

title :

description :

backgroundImage :

template :

unit :

url :

variant :

newTab :

qrCodeId :

ratio :

alt :

youtubeId :