Skip to main content
0

สวัสดีครับทุกคน ในฐานะที่เราเป็น 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
Aphinan Janta

Author Aphinan Janta

Dev Init Frontend

More posts by Aphinan Janta
Close Menu

เราใช้คุกกี้เพื่อพัฒนาประสิทธิภาพ และประสบการณ์ที่ดีในการใช้เว็บไซต์ของคุณ คุณสามารถศึกษารายละเอียดได้ที่ นโยบายความเป็นส่วนตัว และสามารถจัดการความเป็นส่วนตัวเองได้ของคุณได้เองโดยคลิกที่ ตั้งค่า

ตั้งค่าความเป็นส่วนตัว

คุณสามารถเลือกการตั้งค่าคุกกี้โดยเปิด/ปิด คุกกี้ในแต่ละประเภทได้ตามความต้องการ ยกเว้น คุกกี้ที่จำเป็น

ยอมรับทั้งหมด
จัดการความเป็นส่วนตัว
  • คุกกี้ที่จำเป็น
    เปิดใช้งานตลอด

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

  • คุกกี้สำหรับการติดตามทางการตลาด

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

บันทึกการตั้งค่า