React hook: useContext แบบสั้นๆ

useContext เป็น hook ให้เราเข้าถึง context object ใน functional component โดย context จะเป็นวิธีการส่งข้อมูลไปยัง component ที่อยู่ใน tree โดยไม่ต้องส่ง props มาทีละตัว

เข้าใจง่ายๆ ก็คือ อะไรที่อยู่ใต้ context นั้น สามารถเข้าถึงได้โดยไม่ต้องส่ง props ให้แต่ละ component

import React, { useContext } from "react";

const ThemeContext = React.createContext("light");

function ThemeButton() {
  const theme = useContext(ThemeContext);

  return (
    <button
      style={{
        background: theme === "dark" ? "black" : "white",
        color: theme === "dark" ? "white" : "black",
      }}
    >
      Toggle Theme
    </button>
  );
}

จากตัวอย่างข้างบน เราจะมีการสร้าง context ที่มีชื่อว่า ThemeContext แล้วกำหนดค่าให้เป็น light จากนั้นเราสร้างตัวแปรชื่อ theme เพื่อรับค่าจาก ThemeContext โดยใช้ useContext เสร็จแล้วก็นำไปใช้กับ button