React hook form ทำเรื่องฟอร์มให้เป็นเรื่องง่าย

บทความนี้ขอสรุป Library Form Validation for React ที่ผมมักเลือกใช้บ่อยๆ อย่างที่ทราบกัน Form Validation ใน React มีให้เลือกใช้หลายตัว แต่ทำไมผมถึงชอบ React-Hook-Form ไปดูเหตุผลกัน

React Hook form

น่าจะไม่ต้องอธิบายอะไรมาก Form Validation ก็คือ ตัวที่ทำหน้าที่ควบคุมข้อมมูลของ input ทั้งหมดในหน้า form เพื่อให้เราสามารถดักค่าข้อมูลในฟอร์ม หรือทำการแจ้งเตือนผู้ใช้งานได้ ก่อนทำการ submit


ข้อดี

  • ใช้งานง่าย เขียนโค๊ดน้อย เนื่องจากมี Hook ให้เรียกใช้ ไม่ต้องประกาศอะไรเยอะ
  • ขนาดแพ็คเกจเล็ก ไม่เทอะทะ
  • มีทั้ง React Web และ React Native
  • รองรับ Typescript
  • มีการ Optimize เป็นอย่างดี เพื่อเพิ่มประสิทธิภาพการทำงาน
  • ชูจุดเด่นเรื่องความเร็วในการ Mounting
  • มีรางวัลการันตี เช่น Javascript Rising Star, React Open Source Award เป็นต้น

การใช้งาน

สามารถเข้าไปเล่น Demo และอ่าน Document ได้ ไม่ยากเกินไป แต่มันมีรายละเอียดยุบยับ ซึ่งต้องลองเอาไปใช้ดู ถึงจะรู้ว่ามันดีจย์ และทำอะไรได้หลากหลายจริง

เท่านี้แหละครับ เอามาสรุปสั้นๆให้เห็นข้อดี และพวกคีย์เวิร์ดที่น่าสนใจ

หลังจากนี้คงไม่ลงเรื่องโค๊ดล่ะ เพราะ Blogger มันลงโค๊ดยากไปหน่อย ต้องไปหา plugin มาใส่ก่อน


Comments

Post a Comment

Popular posts from this blog

"yes" "yeah" "yep" เหมือนและต่างกันอย่างไร ?

Image
สวัสดีครับ หลายคนคงปิดเทอมกันอยู่ล่ะสิ แอดมินก็เหมือนกัน กิจกรรมที่น่าทำมากๆตอนปิดเทอม ก็ต้องดูหนังสิครับ ซี่รี่เอย การ์ตูนเอย จัดเต็มกันไปเลย แล้วท่านผู้อ่านเคยสงดูหนังฝรั่งไหมครับ เคยสงสัยไหมว่า Yes ,Yeah ,Yep ,Yup อะไรพวกนี้มันเหมือนกันไหม แตกต่างกันอย่างไร แอดมินก็สงสัยครับ .... จนในที่สุดก็ได้รับคำตอบว่า คำพวกนี้ความหมายเหมือนกันครับ คือแปลว่า "ใช่" ส่วนคำว่า Yeah (ออกเสียงว่า "เย") นั้นมาจากความขี้เกียจของฝรั่งที่ไม่อยากออกเสียง S แต่ก็มีอีกพวกที่ไม่อยากออกเสียง S พวกนี้ใช้ P แทน จึงกลายเป็น Yep หรือ Yup ครับ นอกจากนี้ยังมี Ya คำนี้ส่วนใหญ่จะเห็นในเพลงนะครับ ถามว่าเราควรใช้คำไหน แอดมินคิดว่าตามสะดวกแหละครับ แต่หากจะเป็นทางการหน่อย ก็ใช้ Yes ถ้า Yep ก็จะประมาณว่า "เออ" "อือ" อะไรทำนองนั้น ส่วน Yeah ก็จะเหมือนกับตอนที่เราต้องการพูดว่า "ใช่" แบบ "แมร่งใช่อ่ะ" คือมีอารมณ์ด้วย ลองดูคลิปด้านล่างเป็นตัวอย่างก็ได้ครับ ตอนนี้แอดมินกำลังฝึกภาษาอังกฤษต้อนรับ AEC  อยู่ครับแหะๆ วันนี้ก็เลยพูดเรื่องภาษาอังกฤษ
Read more

ไขรหัสนาซี Enigma แบบง่ายๆ สไตล์เอนจิเนียร์อินดี้ (The Imitation Game)

Image
"Sometimes it's the people no one imagines anything of who do the thing that no one can imagine" "บางครั้งคนที่ถูกมองข้ามไป คือคนที่จะทำในสิ่งที่ยิ่งใหญ่กว่าที่ทุกคนคาดคิด" เปิดด้วยคำคมเด็ดๆจากหนังเรื่อง The Imitation Game  พอดีเพิ่งไปดูมากำลังอินอยู่ แบบสนุกมาก หนังแนวนี้แอดมินจะปลื้มเป็นพิเศษ ตัวหนังเล่าชีวประวัติของ แอลัน ทัวริง นักคณิตศาสตร์ผู้ที่สามารถแกะรหัสเครื่อง Enigma  ของนาซีได้สำเร็จ ถือเป็นส่วนสำคัญที่ทำให้ฝ่ายสัมพันธมิตรชนะสงครามโลกครั้งที่ 2  แต่บล็อกนี้ไม่ได้มาสปอยหนังนะครับ เราจะมาเรียนรู้การทำงานของเจ้า Enigma กัน เล่าก่อนว่ายุคสงครามโลกครั้งที่ 2 ฝ่ายเยอรมันใช้การสื่อสารทางสัญญาณวิทยุเป็นหลัก ข้อดีของมันก็คือ สามารถส่งได้ไกล สะดวกและรวดเร็ว แต่ข้อเสียก็คือ เนื่องจากสัญญาณวิทยุเดินทางผ่านอากาศ ทำให้ใครๆก็สามารถดักฟังข้อมูลได้ ดังนั้นจึงต้องมีการเข้ารหัสก่อนที่จะทำการส่ง Credit :  http://en.wikipedia.org/wiki/Enigma_machine ใช่แล้วครับ เครื่อง Enigma  พระเอกของเราเป็นตัวเข้ารหัสและถอดรหัส รูปทรงคล้ายเครื่องพิมพ์ดีด มี
Read more

รีวิว Dentiste Mastic Mint Bomb เม็ดอมที่ไม่ได้มีดีแค่ความสดชื่น

Image
กลับมาอีกแล้วกับ แอดมินนักรีวิวเซเว่นในตำนาน เหมือนจะหลุดจากวงโคจรของวิศวกรรมไปไกล แต่ก็นั่นแหละ ยังนึกไม่ออกว่าจะเขียนอะไรดี ใครอยากอ่านเรื่องอะไรก็ลองคอมเม้นมาดู ถ้าเขียนได้ จะกลับมาเขียนอย่างจริงจังนะ พูดถึงเม็ดอมที่อยู่ในเซเว่น นั้นมีหลากหลายสายพันธุ์ และเนื่องด้วยแอดมินเป็นแฟนตัวยงของเซเว่น จึงไม่พลาดเลยที่จะต้องแว๊บไปส่องโซนลูกอมเกือบทุกวัน และวันนี้ก็เช่นกันที่แอดมินสะดุดตากับเจ้า.. Dentiste Mastic Mint Bomb บอกเลยว่าใครที่ใช้ยาสีฟันของ Dentiste อยู่ เป็นต้องสะดุดแบบแอดมินแน่นอน ก็ใครจะไปนึกล่ะว่าแบรนด์ยาสีฟันจะหันมาทำเม็ดอมกะเค้าด้วย เออ เอากะเค้าสิ แบบนี้ไม่ลองไม่ได้แล้ว ซองก็ประมาณนี้ เหมือนถุงยางอ่ะ ฮ่าๆๆ ว่าแล้วก็จัดมา 1 กล่องมี 2 ซอง ในซองมี 2 เม็ด หลายคนอาจจะสับสนเหมือนแอดมินว่า Mastic ที่เขียนอยู่บนซอง มันคืออะไร จริงๆแล้วมันคือ Mastic Oil น้ำมันจากต้น Mastic ลองไป Google ดูเอา สรรพคุณของมันคือ ช่วยต้านแบคทีเรียในช่องปาก สาเหตุของการเกิดกลิ่นปากหนะเอง #ความรู้ก็มา ความรู้สึกหลังกินคือ เย็นมาก... เมื่อแอดมินบอกว่ามาก มันคือมาก You know! โดยตั
Read more

โปรแกรมบวกลบเมทริกซ์ง่ายๆ by C++ (ตอนที่ 1)

Image
สวัสดีครับชาวเอนจิเนียร์อินดี้ เจอกันอีกแล้ว โพสนี้แอดมินจะเอาเทอมโปรเจคสายโปรแกรมมิ่งแบบง่ายๆ (ย้ำ ง่ายๆ) มาฝาก เป็นโปรแกรมบวกลบ เมทริกซ์ ซึ่งจะใช้ภาษาซีพลัสพลัสเขียน ตัวโปรแกรมเหมาะมากสำหรับการเรียนรู้โปรแกรมมิ่ง เพราะครอบคุมส่วนต่างๆในการเรียนโปรแกรมมิ่งขั้นพื้นฐานทั่วไป ทั้งการแสดงผลทางหน้าจอ การรับอินพุต If-Else, Loop, Array, Struct และอื่นๆ ดังนั้นโปรแกรมนี้จึงเหมาะสำหรับผู้สนใจโปรแกรมมิ่งเบื้องต้นอย่างมาก และสามารถเป็นแนวทางต่อผู้ที่จะนำไปทำเป็นเทอมโปรเจค (สายฟรีดอม) ได้อีกด้วย เพื่อไม่ให้เสียเวลาไปเริ่มกันเลยดีกว่า เออลืมบอกไปอีกอย่างนะ ดูไปแค่คอนเซปก็พอ เพราะตัวโปรแกรมบั๊คเพียบเลย ฮะๆ เมทริกซ์คือ ??? หลายท่านคงจะทราบกันดีหรือถ้ายังไม่ทราบก็จะอธิบายตรงนี้ว่า มันคือ ตารางสี่เหลี่ยมที่แต่ละช่องบรรจุจำนวนหรือโครงสร้างทางคณิตศาสตร์ที่สามารถนำมาบวกและคูณกับตำเลขได้ เราสามารถใช้เมทริกซ์แทนระบบสมการเชิงเส้น และใช้เก็บข้อมูลที่ขึ้นกับตัวแปลต้นสองตัว เมทริกซ์จึงเป็นแนวคิดที่มีความสำคัญต่อพีชคณิตเชิงเส้นอย่างมาก #Wikipedia สำหรับ ม.6 คงได้เรียนกันมาบ้าง ใครสนใจ
Read more

วิธีใช้ Google Chrome Extension บน Microsoft Edge (Chromium)

Image
หลังจากที่ย้ายค่ายมาใช้ Microsoft Edge (Chromium) สักพัก รู้สึกประทับใจกับความเร็ว และประสบการณ์การใช้งานที่คุ้นเคย แอดมินแนะนำเลยลองมาใช้ แล้วจะติดใจ บล็อกนี้จะแนะนำวิธีติดตั้ง Extension ที่เคยใช้บน Google Chrome มาลงบนตัว Microsoft Edge กันครับ คลิกปุ่ม Setting มุมขวาบนตามรูป เลือก Extensions  เปิดปุ่มสวิทซ์ Allow extensions from other store ตามรูป จากนั้นไปที่ Chrome Web Store เลือก Extension ที่ต้องการติดตั้ง กดปุ่ม Add to Chrome ตามรูป เท่านี้ก็สามารถใช้งาน Extensions ของ Google Chrome บน Microsoft Edge ได้แล้ว
Read more