การสร้าง Scrollbar แบบปรับแต่งได้ด้วย SimpleBar สำหรับ React

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

การนำเข้าและการตั้งค่าเบื้องต้น

ขั้นแรก เรานำเข้า SimpleBar และสไตล์ที่เกี่ยวข้องจาก simplebar-react เพื่อใช้ในการสร้าง Scrollbar

import SimpleBar from "simplebar-react";
import "simplebar-react/dist/simplebar.min.css";

การสร้างคอมโพเนนต์ Scrollbar

ต่อมาเราจะสร้างคอมโพเนนต์ Scrollbar ที่รับ props ซึ่งประกอบด้วย children และ sx ที่ใช้สำหรับการปรับแต่งสไตล์

interface PropsType {
  children: React.ReactElement | React.ReactNode;
  sx: SxProps;
}

const Scrollbar = (props: PropsType) => {
  const { children, sx, ...other } = props;

การตรวจสอบอุปกรณ์มือถือ

ในคอมโพเนนต์นี้ เราใช้ navigator.userAgent เพื่อตรวจสอบว่าผู้ใช้ใช้อุปกรณ์มือถือหรือไม่ หากใช่ เราจะใช้กล่องธรรมดา (<Box>) ที่มีสไตล์ overflowX: "auto" เพื่อแสดง Scrollbar ที่เหมาะสมสำหรับมือถือ

  const isMobile =
    /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
      navigator.userAgent
    );
  if (isMobile) {
    return <Box sx={{ overflowX: "auto" }}>{children}</Box>;
  }

การใช้ SimpleBar สำหรับอุปกรณ์อื่นๆ

ถ้าผู้ใช้ไม่ใช้อุปกรณ์มือถือ เราจะใช้ SimpleBarStyle ซึ่งเป็นคอมโพเนนต์ที่ถูกสร้างจาก SimpleBar และปรับแต่งให้มีความสูงเต็มที่ (maxHeight: "100%")

  return (
    <SimpleBarStyle sx={sx} {...other}>
      {children}
    </SimpleBarStyle>
  );
};

export default Scrollbar;

สรุป

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

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