การใช้งาน React Library ในการทำ Custom Preview รูปภาพ Full Screen เบื้องต้น

สวัสดีครับ ผมขอแนะนำตัวก่อนนะครับ ผมบิ๊ก จาก บริษัท M Intelligence ปัจจุบันทำงานอยู่ในตำแหน่ง Front end developer อันนี้เป็นการเขียนบทความครั้งแรกของผม ผมอยากมาแชร์มุมมองในการใช้ Library React มาใช้ในชีวิตประจำวัน มันจะทำให้เพื่อนๆสามารถทำงานได้ รวดเร็ว และสะดวกมากขึ้น ผมขออธิบายเกี่ยวกับการใช้ Library เบื้องต้นนะครับ ว่ามันมีข้อดีข้อเสียยังไง ทำไมเพื่อนๆถึงต้องใช้ Library ในการทำงานในชีวิตประจำวันด้วย

ใช้ Library ดีกว่าเขียนเองยังไง ?

1.ประหยัดเวลา — การใช้ Library ช่วยลดเวลาในการพัฒนา โดยไม่ต้องเขียนโค้ดทุกอย่างเอง

2.ความเสถียร — Library ที่ได้รับการทดสอบมากๆ มีโอกาสมีความเสถียรมากขึ้น ยกตัวอย่าง เช่น ถ้าคนใช้ Library แล้วเกิดปัญหาจะมีการกลับไปแจ้งนักพัฒนาให้แก้ไข เพราะพอนักพัฒนาได้ feedback ในเชิงลบ(บัค) นักพัฒนาจะมีแก้ไขปัญหาในส่วนที่แจ้งมา แล้วอัพกลับไปให้เป็นเวอร์ชั่นใหม่ที่ทางนักพัฒนาแก้ไขมาแล้ว

3.ความยืดหยุ่น — สามารถใช้ Library หลายๆตัวได้เพื่อบรรลุฟังก์ชันที่ต้องการ

เป็นธรรมดาถ้ามีข้อดีก็ต้องมีข้อเสียควบคู่ไปด้วย

1. ขนาด — บางครั้ง Library มีขนาดใหญ่ ซึ่งอาจทำให้มีความจำเป็นต้องโหลดไฟล์ที่ไม่จำเป็น
2. การปรับแต่ง — อาจมีข้อจำกัดในการปรับแต่ง Library ตามความต้องการของโปรเจกต์

ผมเกริ่นเรื่อง Library มาพอสมควร วันนี้ผมเลยจะมาแนะนำ Library React อยู่ 2 ตัวครับ คือ ตัว react-full-screen กับ react-fit-to-viewport มาใช้ในการทำ Custom Preview รูปภาพให้เต็มหน้าจอ หรือ การกำหนดขอบเขตของหน้าจอได้ ตามที่เราต้องการ

ก่อนอื่นเลย ผมจะขออธิบายการใช้งานเบื้องต้น ของ React-Full-Screen พร้อมตัวอย่างประกอบ

1. ต้องติดตั้งตัว Library react-full-screen สักก่อนไม่งั้นเพื่อนๆจะไม่สามารถใช้งาน Library ตัวนี้ได้ครับ

มีวิธีการติดตั้งอยู่ 2 วิธี ( npm / yarn)

React-full-screen , React-fit-to-viewport

npm i react-full-screen
npm i react-fit-to-viewport

or

yarn add react-full-screen
yarn add react-fit-to-viewport

2. วิธีดูว่า Library ตัวที่เราต้องการใช้ install เสร็จ ดูได้ที่ File package.json

3. พอติดตั้งตัว Library เสร็จ ผมจะมาสอนวิธีใช้ Library กัน ก่อนอื่นเลย เพื่อนๆต้อง import ตัว Library เข้ามาก่อน เพื่อให้จะได้รู้ว่าเราจะใช้ Library ตัวไหนในการทำงาน

4. React สามารถใช้งานคู่กับ State ได้ พอเพื่อนๆ Import react-full-screen มาแล้ว เพื่อนๆจะสามารถใช้ Tag FullScreen ได้ Tag FullScreen เหมือน Component ตัวนึงที่ข้างในจะมี Tag Html ต่างๆ ที่ custom css มาให้เสร็จ เราก็แค่ประกาศ Tag (ที่บรรทัด 20) ข้างใน Tag FullScreen เพื่อนๆสามารถใส่ Tag Html ได้ปกติ รวมถึง State กับ css ก็สามารถใช้ได้

5. พอเพื่อนๆทำ react-full-screen เสร็จแล้ว เมื่อเป็นการไม่เสียเวลา ผมจะเริ่ม Library ตัวที่สองกันเลย Library ตัวนี้มีชื่อว่า react-fit-to-viewport เพื่อนๆอาจจะสงสัยว่า Library ตัวนี้มีไว้ทำอะไร แต่ถ้าจะแปลตรงๆ viewport หมายความว่า เป็นพื้นที่ที่แสดงผลของเว็บไซต์บนหน้าจอของอุปกรณ์ สรุปก็คือ react-fit-to-viewport มันคือ Library ที่ช่วยให้เพื่อนๆสามารถ ฟิต ขนาดของขนาดหน้าจอได้เลยโดยไม่ตรงเขียน css เองนั้นเอง

6. โค๊ดจะคล้าย react-full-screen คือตอนแรก ต้อง Import Library มาก่อน (บรรทัด 2) เสร็จแล้ว เพื่อนๆก็ใช้สามารถใช้งาน Library ได้ (บรรทัด 7) ถ้ามีเปิด tag (ต้องปิดเสมอนะ กลัวเพื่อนๆลืม) เพื่อนๆจะสังเกตว่า props ที่ใช้ของ Library จะมีทั้งหมด 4 ตัวหลักๆ ก็คือ

1.width<number> ความกว้าง

2.height<number> ความสูง

3.maxZoom<number> ซูมได้สูงสุด 1.0–3.0

4.minZoom<number> ซูมได้ต่ำสุด 0.1-1.0

แต่ props ที่ไม่บอกไว้ข้างต้นบางตัวก็สามารถใช้งานได้ เช่น className กับ style ไว้ใช้ตกแต่ง css กัน

สรุป

Library มีประโยชน์ครับ แต่ต้องเลือกใช้กับ project ตาม requirement ที่เหมาะสมครับ ไว้พบกันไหมครับ…

แหล่งที่มา :

https://www.npmjs.com/package/react-full-screen

https://react-fit-to-viewport.pomb.us/

https://github.com/pomber/react-fit-to-viewport