ซ่อน Navbar ขณะเลื่อนหน้าจอง่ายๆ ด้วย React Headroom กันเถอะ!!!

สวัสดีครับทุกคน ในฐานะที่เราเป็น Front-end Developer มีหน้าที่จัดการส่วนของฝั่งหน้าบ้านแล้ว สิ่งที่จำเป็นต้องคำนึงถึงก็คือประสบการณ์การใช้งานของผู้ใช้ และวันนี้ผมจะพาทุกคนมาเพิ่มประสบการณ์การใช้งานให้กับผู้ใช้งานเว็บไซต์ของเราด้วยการซ่อนแถบ Navbar ขณะที่ผู้ใช้งานเลื่อนหน้าจอแบบง่ายๆ ด้วยไลบรารีที่มีชื่อว่า React Headroom กันนะครับ จะเป็นยังไงนั้นก็ไปลุยกันเลย!!!

React Headroom คืออะไร?

React Headroom เป็นไลบรารีของ React ที่มี Component ที่สามารถช่วยจัดการซ่อนหรือแสดงส่วนของ Navbar เมื่อ ผู้ใช้ทำการเลื่อนหน้าจอขึ้นหรือลงนั้นเอง

วิธีการติดตั้ง

เราสามารถติดตั้งผ่าน npm หรือ yarn ได้โดยใช้คำสั่งนี้

npm i react-headroom

หรือ

yarn add react-headromm

วิธีการเรียกใช้งาน

เมื่อติดตั้งเสร็จสิ้นแล้วเราสามารถเรียกใช้แบบง่ายๆโดย

// import Headroom มาใช้งาน
import Headroom from "react-headroom";

function App() {
  return (
    <>
      {/* ใช้ Headroom ครอบ Navbar */}
      <Headroom>
        {/* ส่วนของ Navbar ของเรา */}
        <nav className="navbar bg-primary">
          <div>
            <a className="btn btn-ghost text-xl text-white">React Haedroom</a>
          </div>
        </nav>
      </Headroom>
      <main>
        {/* ส่วนของเนื้อหาในเว็บ */}
      </main>
    </>
  );
}

export default App;

เพียงเท่านี้เราก็จะสามารถซ่อน Navbar ขณะที่เลื่อนหน้าจอได้แล้ว

และยังมี Props อื่นๆ ที่สามารถใช้งาน

• downTolerance กำหนดค่าความสูงที่ผู้ใช้ต้องเลื่อนลงในการซ่อน Navbar (ค่าเริ่มต้นคือ 0)

<Headroom downTolerance={10}>
  {/* เนื้อหา */}
</Headroom>

• upTolerance กำหนดค่าความสูงที่ผู้ใช้ต้องเลื่อนขึ้นในการแสดง (ค่าเริ่มต้นคือ 0)

<Headroom upTolerance={5}>
  {/* เนื้อหา*/}
</Headroom>

• onPin ใช้สำหรับกำหนดฟังก์ชันที่จะเรียก Navbar ถูกตรึงไว้บนด้านบนของหน้าจอ

<Headroom onPin={() => console.log('pinned')}>
  {/* เนื้อหา */}
</Headroom>

• onUnpin ใช้สำหรับกำหนดฟังก์ชันที่จะเรียกเมื่อ Navbar ถูกยกเลิกการตรึงบนด้านบนของหน้าจอ

<Headroom onUnpin={() => console.log('unpinned')}>
  {/* เนื้อหา */}
</Headroom>

• wrapperStyle ใช้สำหรับกำหนดสไตล์ CSS ให้กับ wrapper ของ React-Headroom

<Headroom wrapperStyle={{ background: 'black' }}>
  {/* เนื้อหา */}
</Headroom>

• disable ใช้เพื่อปิดการทำงานของ React-Headroom โดยระบุค่า true เมื่อต้องการปิดการทำงาน

<Headroom disable={true}>
  {/* เนื้อหา */}
</Headroom>

• pinStart มีความสูงเป็น px ซึ่งใช้สำหรับกำหนดค่าของพื้นที่ด้านบนของ Navbar มีประโยชน์เมื่อมี Component อื่นอยู่เหนือ Navbar นั้นเอง

<Headroom pinStart={300}>
  {/* เนื้อหา */}
</Headroom>

นอกจากนี้ยังมี props อื่นๆ เพิ่มเติมที่เราสามารถใช้งานได้สามารถอ่านข้อมูลเพิ่มเติมที่ React Headroom

ประสบการณ์การใช้งานที่จะผู้ใช้ได้รับ ✨

• เพิ่มพื้นที่เนื้อหา
  การซ่อน Navbar เมื่อไม่ได้ใช้งาน จะช่วยให้เนื้อหาของเว็บไซต์มีพื้นที่เพิ่มขึ้น ทำให้ผู้ใช้สามารถมองเห็นเนื้อหาที่สำคัญได้ ซึ่งเป็นประโยชน์สำหรับการสื่อสารข้อมูลที่ต้องการให้ผู้ใช้เข้าถึงได้รวดเร็ว
• ความสะดวกสบาย
  การซ่อน Navbar เมื่อไม่ได้ใช้งาน ช่วยให้ผู้ใช้ได้รับประสบการณ์การเรียนรู้ ที่ไม่ต้องสับสนหรือมองหาข้อมูลเพิ่มเติม หากมีการนำเสนอ Navbar ตลอดเวลาอาจทำให้ผู้ใช้งานเกิดความสับสน และได้รับข้อมูลที่ไม่ต้องการมากจนเกินไป

สรุป

เป็นยังไงกันบ้างครับสำหรับ React Headroom ที่นำมาแนะนำกับทุกคนในวันนี้ใช้งานไม่ยากเลยใช่ไหมครับ ทั้งมีการเรียกใช้งานที่ง่ายมี Props ต่าง ๆ ที่มีให้เราได้เลือกใช้งาน จึงมั่นใจได้ว่าประสบการณ์ใช้งานที่ได้รับและการนำเสนอเนื้อหาที่ดีต่อผู้ใช้งานมีประสิทธิภาพและสวยงามอย่างแน่นอนครับ สุดท้ายนี้หวังว่าบทความนี้จะเป็นประโยชน์ต่อทุกคนนะครับ

อ้างอิง

1. React Headroom วิธีการติดตั้งและ Props ต่างๆ สืบค้นเมื่อเมื่อวันที่ 23 เมษายน 2567
   จาก: kyleamathews.github.io/react-headroom
2. วิธีการใช้งาน สืบค้นเมื่อเมื่อวันที่ 23 เมษายน 2567
   จาก: https://github.com/KyleAMathews/react-headroom