Xây dựng công cụ tạo Lorem Ipsum bằng React không dùng thư viện

Lorem Ipsum là đoạn văn mẫu phổ biến được sử dụng trong thiết kế và phát triển web để lấp chỗ văn bản. Thông thường, các trình tạo Lorem Ipsum dựa vào các thư viện npm phức tạp hơn mức cần thiết cho việc lấy mẫu từ bộ từ điển từ vựng cổ điển. Bài viết trình bày cách xây dựng một trình tạo Lorem Ipsum đơn giản với React, không phụ thuộc thư viện ngoài, hỗ trợ đầu ra dạng đoạn văn, câu và từ, đi kèm tính năng sao chép nhanh.

Bộ từ điển từ tiêu chuẩn

Công cụ dựa trên 69 từ kinh điển trong đoạn trích "de Finibus Bonorum et Malorum" của Cicero. Các từ này đủ đa dạng để tạo ra nhiều mẫu văn bản placeholder khác nhau qua việc lấy mẫu ngẫu nhiên nhiều lần mà không làm cạn kiệt từ vựng.

Ví dụ bộ từ: lorem, ipsum, dolor, sit, amet, consectetur, adipiscing, elit, sed, do, eiusmod...

Các trạng thái chính trong React

• count: số lượng đơn vị cần tạo (số đoạn, câu hoặc từ)
• type: loại đầu ra (paragraphs - đoạn văn, sentences - câu, words - từ)
• text: nội dung văn bản được tạo
• copied: trạng thái thông báo đã sao chép thành công

Việc lưu trữ trong state giúp cập nhật giao diện liên tục khi người dùng thay đổi các tùy chọn.

Sinh câu và đoạn văn

Câu được tạo từ 5–14 từ ngẫu nhiên, từ đầu tiên được viết hoa và kết thúc bằng dấu chấm.

Đoạn văn gồm 3–7 câu được kết nối với nhau bằng dấu cách.

Hàm sinh câu và đoạn văn này hoàn toàn đơn giản, không cần các thuật toán phức tạp hay thư viện hỗ trợ.

Hàm tạo văn bản đa chế độ

Dựa trên trạng thái type, hàm tạo có thể trả về:

• Từ: tạo ra một chuỗi gồm số lượng từ theo yêu cầu
• Câu: tạo ra nhiều câu liên tiếp
• Đoạn văn: tạo ra nhiều đoạn văn phân tách bởi dòng trống

Giao diện cũng thay đổi giới hạn số lượng tối đa thích hợp với từng loại: tối đa 200 từ, 20 câu, 10 đoạn.

Tự động sinh văn bản và tái tạo khi thay đổi

Khi component được khởi tạo, văn bản sẽ tự động được tạo ngay để người dùng không phải nhấn nút. Khi thay đổi loại hay số lượng, văn bản cũng được cập nhật tự động nhờ hook useEffect.

Tính năng sao chép vào clipboard

Chỉ với một nút bấm, văn bản hiện tại có thể được sao chép nhanh vào clipboard. Nút sẽ thay đổi trạng thái thành "Copied!" trong 2 giây để báo hiệu thành công.

Giao diện thân thiện, trực quan

Giao diện sử dụng React kết hợp Tailwind CSS, cung cấp lựa chọn loại đầu ra, thanh kéo chọn số lượng, nút tạo lại văn bản và vùng hiển thị kết quả. Đây là công cụ tiện lợi cho các nhà phát triển web Việt Nam muốn có văn bản placeholder nhanh gọn, tùy chỉnh linh hoạt mà không cần tải thêm thư viện bên ngoài.

Toàn cảnh

Toàn bộ component gồm khoảng 110 dòng, dễ bảo trì, không có API bên ngoài hay phụ thuộc vào thư viện npm. Bằng cách lấy mẫu ngẫu nhiên từ bộ 69 từ kinh điển, công cụ giúp bạn tạo ra nhiều kiểu văn bản placeholder đa dạng, phù hợp với nhiều mục đích sử dụng trong phát triển frontend hiện đại.

Bạn có thể trải nghiệm công cụ này tại: Lorem Ipsum Generator trên ultimatetools.io

---

Với cách tiếp cận đơn giản và nhẹ nhàng này, các lập trình viên tại Việt Nam có thể dễ dàng hiểu và tái sử dụng để tạo ra các công cụ tiện ích tương tự, bổ trợ vào quy trình phát triển mà không làm gia tăng gánh nặng cho dự án.