Bắt đầu với React‑Grid‑Layout

React‑Grid‑Layout là hệ thống lưới mạnh mẽ giúp bạn tạo bố cục (layout) responsive một cách dễ dàng. Trong Bookmark Dashboard, component Dashboard sử dụng React‑Grid‑Layout – thư viện hỗ trợ kéo‑thả và thay đổi kích thước (resize) “tận răng”, nên việc tích hợp gần như không tốn công.

Dưới đây là hướng dẫn nhanh cách sử dụng React‑Grid‑Layout – “động cơ” phía sau bố cục linh hoạt của Bookmark Dashboard.

Cài đặt

Cài qua npm hoặc yarn:

npm install react-grid-layout

yarn add react-grid-layout

Ví dụ cơ bản

import React, { useState, useCallback } from 'react';
import { Responsive, WidthProvider } from 'react-grid-layout';
import GridItem from './GridItem';

import 'react-grid-layout/css/styles.css';
import 'react-resizable/css/styles.css'; // dependency of react-grid-layout

const ResponsiveGridLayout = WidthProvider(Responsive);

function MyDashboard() {
  const [layout, updateLayout] = useState([]);

  const handleDragAndResize = useCallback((layout, oldItem, newItem) => {
      updateLayout(layout)
  }, []);

  return (
    <ResponsiveGridLayout
      breakpoints={{ md: 960, sm: 720 }}
      cols={{ md: 12, sm: 12 }}
      rowHeight={40}
      layouts={layout}
      onDragStop={handleDragAndResize}
      onResizeStop={handleDragAndResize}
    >
      {layout.map((item) => (
        <div key={item.i}>
          <GridItem item={item} />
        </div>
      ))}
    </ResponsiveGridLayout>
  )
}

Trong đó:

• ResponsiveGridLayout là hệ thống lưới hoàn chỉnh, tự thích ứng với kích thước container và hỗ trợ breakpoints.
• Dựa trên breakpoint, chiều rộng container được chia thành cols cột.

Đơn vị lưới (grid unit)

Mỗi ô trong lưới được đo bằng grid unit:

• unitWidth = width container / số cột
• unitHeight = rowHeight

Từ đó:

• Chiều rộng thực của item = unitWidth × w
• Chiều cao thực của item = unitHeight × h

Cấu trúc dữ liệu layout

// layout
[
  {
    "i": "3184",
    "w": 4,
    "h": 3,
    "x": 0,
    "y": 4,
    "moved": false,
    "static": false
  },
  {
    "i": "3232",
    "w": 8,
    "h": 4,
    "x": 0,
    "y": 0,
    "moved": false,
    "static": false
  },
  {
    "i": "3216",
    "w": 4,
    "h": 9,
    "x": 8,
    "y": 0,
    "moved": false,
    "static": false
  },
  {
    "i": "3196",
    "w": 4,
    "h": 5,
    "x": 4,
    "y": 4,
    "moved": false,
    "static": false
  }
]

Trong đó:

• i : ID của item
• w, h: kích thước (đơn vị lưới)
• x, y: toạ độ góc trên‑trái (đơn vị lưới)

Khi kéo‑thả hoặc resize, callback onDragStop / onResizeStop trả về layout mới; chỉ cần cập nhật state layout là toàn bộ lưới được render lại.

GridItem là component tùy chỉnh hiển thị nội dung. Trong demo, nó render danh sách bookmark, nhưng bạn có thể đặt bất cứ thứ gì.

Kết luận

React‑Grid‑Layout vừa thân thiện vừa mạnh mẽ. Trải nghiệm dev rất “nuột”: repo GitHub có tài liệu chi tiết kèm live demo. Rất đáng thử cho bất kỳ ai cần layout kéo‑thả, responsive.

Cảm ơn các bạn đã theo dõi!