🔥 新規プロジェクトをご紹介します t0ggles - 究極のプロジェクトマネジメントツールです! 🔥

useTheme

Konsta UIには便利なuseThemeフックが付属しており、App コンポーネントまたはKonstaProviderによって設定された現在アクティブなテーマ(iosまたはmaterial )を検出できます。

/* App.jsx */
import { App } from 'konsta/react';
import { HomePage } from './path/to/HomePage.jsx';

export default function MyApp() {
  return (
    <>
      {/* set theme on App component */}
      <App theme="ios">
        <HomePage />
      </App>
    </>
  );
}
/* HomePage.jsx */
import { useTheme, Page } from 'konsta/react';

export default function MyApp() {
  // get currently set theme
  const theme = useTheme();

  console.log(theme); // -> 'ios'

  return (
    <>
      <Page>
        {theme === 'ios' ? <p>Theme is iOS</p> : <p>Theme is Material</p>}
      </Page>
    </>
  );
}
コードのライセンスは MIT.
2022 © KonstaUI by nolimits4web.