สร้าง popover ง่าย ๆ ด้วย react-tiny-popover

เนื่องจากผมได้รับมอบหมายให้สร้างตารางสำหรับแสดงข้อมูลในระบบซึ่งแต่ละแถวจะมีปุ่ม action สำหรับลบแถวนั้น ๆ ออกจากตาราง requirement คือเมื่อกดปุ่มลบจะมีการแจ้งเตือนเพื่อให้ยืนยันก่อนที่จะลบ ถ้าเราใช้ confirm ของตัว browser ก็จะดูจืด ๆ เกินไป หลังจากที่ผมได้ search google ก็ได้พบกับ react-tiny-popover ซึ่งเป็น component ที่ช่วยให้เราสร้าง popover และสามารถแก้ไข style ได้ หลังจากได้ลองเล่นแล้วรู้สึกว่าใช้งานง่ายจึงอยากมาแนะนำวิธีใช้งาน react-tiny-popover เบื้องต้นให้เพื่อน ๆ ดูครับ

เริ่มจากการติดตั้ง Package

ตัวอย่างนี้จะใช้ create-react-app ในการสร้าง project ขึ้นมา หลังจากที่เราสร้าง project แล้วให้ทำการ install package ดังนี้

1. เข้าไปที่เว็บไซต์ https://www.npmjs.com/package/react-tiny-popover

2. เข้าไปที่ root ของ Project ที่มีไฟล์ package.json

3. Add package โดยใช้คำสั่ง npm i react-tiny-popover

Code ตัวอย่างการใช้งาน

ใช้ ArrowContainer ร่วมกับ popover

ผลลัพธ์

Props ที่ต้องใช้สำหรับ Popover

1. children เป็น element ที่เราจะแนบตัว popover ไว้จากตัวอย่างจะเป็นปุ่ม Click me!
2. isOpen เป็น boolean ซึ่งจะเป็นตัวบอกให้ popover แสดงหรือซ่อน
3. content เป็น element สำหรับใส่ข้อมูลในตัว popover ที่จะแสดง จากตัวอย่างก็คือ กล่องสีเขียวนั่นเอง

ArrowContainer

เราจะใช้ ArrowContainer หรือไม่ก็ได้ การทำงานก็คือสร้างลูกศรที่ชี้ไปหาปุ่มที่ถูกกดซึ่งทำให้ผู้ใช้รู้ว่า popover ตัวนั้น ๆ มาจากการกดปุ่มตรงไหนของหน้าจอ จากตัวอย่างปุ่มที่กดก็คือ Click me!

เพื่อน ๆ สามารถศึกษาการใช้งานเพิ่มเติมได้ที่ https://github.com/alexkatz/react-tiny-popover#readme