useTheme

Penggunaan

import { useTheme } from "@govtechmy/myds-react/hooks";
 
const { theme, setTheme } = useTheme();

Source

Penting

Pastikan aplikasi anda dibalut dengan ThemeProvider sebelum menggunakan useTheme untuk menggunakan API yang disediakan.

Contoh

Membina Komponen Tukar Tema

Hook useTheme menyediakan cara mudah untuk menguruskan keadaan tema dalam aplikasi anda. Di bawah, kami mentakrifkan komponen tersuai yang membolehkan pengguna menukar antara mod terang dan gelap.

theme-toggle.tsx

import { useTheme } from "@govtechmy/myds-react/hooks";
 
const ThemeToggle = () => {
  const { theme, setTheme } = useTheme();
 
  return (
    <button onClick={() => setTheme(theme === "light" ? "dark" : "light")}>
      Tukar kepada mod {theme === "light" ? "gelap" : "terang"}
    </button>
  );
};
 
export { ThemeToggle }

Mengisytiharkan ThemeProvider yang Boleh Diakses Secara Global

Untuk menggunakan konteks tema di seluruh aplikasi, balut keseluruhan susun atur dengan ThemeProvider. Ini memastikan semua komponen anak boleh mengakses keadaan tema dan fungsi tukar.

layout.tsx

import type { ReactNode } from "react";
import { ThemeToggleCustom, ThemeProvider } from "./ThemeToggleCustom";
 
export default function Layout({ children }: { children: ReactNode }) {
  return (
    <ThemeProvider>
      <div className="app-container">
        <ThemeToggleCustom />
        {children}
      </div>
    </ThemeProvider>
  );
}

API

useTheme

Prop	Type	Default
`theme`	`string`	`light`
`setTheme`	`(theme: string) => void`	-

ThemeProvider

Prop	Type	Default
`defaultTheme`	`string`	`light`
`setTheme`	`(theme: string) => void`	-

MYDS

useTheme

Penggunaan

Contoh

Membina Komponen Tukar Tema

Mengisytiharkan ThemeProvider yang Boleh Diakses Secara Global

API

useTheme

ThemeProvider

Di halaman ini