useSeedClassName

ImportCopy Anchor Link

import { useSeedClassName } from "@seed-design/lynx-react";

useSeedClassName은 @seed-design/lynx-react 패키지에 포함되어 있습니다. getSeedClassName()의 reactive 버전으로, SeedProvider의 colorMode나 preferredColorScheme이 바뀌면 갱신된 className을 반환합니다.

UsageCopy Anchor Link

기본 사용Copy Anchor Link

root <page> 요소에 적용합니다.

import { root } from "@lynx-js/react";
import { SeedProvider, useSeedClassName } from "@seed-design/lynx-react";

function Page() {
  // 옵션을 생략하면 `SeedProvider`의 `colorMode`를 씁니다.
  const seedClassName = useSeedClassName();
  return (
    <page className={seedClassName}>
      <App />
    </page>
  );
}

root.render(
  <SeedProvider preferredColorScheme="dark">
    <Page />
  </SeedProvider>,
);

앱의 colorMode와 호스트 설정을 SeedProvider로 넘기는 방법은 Host Integration을 참고하세요.

colorMode 옵션Copy Anchor Link

colorMode 옵션을 생략하면 SeedProvider의 colorMode를 쓰고, 그 값도 없으면 system입니다. system일 때 색상 스킴은 colorScheme 옵션, SeedProvider의 preferredColorScheme, lynx.__globalProps.theme 순서로 정하고, 모두 없으면 "light"입니다. Global props에서 읽는 동작은 다음 메이저 버전에서 제거될 예정입니다.

동작 방식Copy Anchor Link

useSeedClassName()은 SeedProvider 값을 구독합니다. 앱이 colorMode나 preferredColorScheme을 바꾸면 이 훅을 사용하는 컴포넌트가 리렌더되고, 훅은 갱신된 테마에 맞는 className을 반환합니다.

className 매핑 로직은 getSeedClassName()과 동일합니다. 차이는 SeedProvider 값 구독 여부뿐입니다.

• useSeedClassName(): SeedProvider 값을 구독하는 훅. root <page>처럼 테마 변경에 반응해야 하는 곳에 사용합니다.
• getSeedClassName(): 넘긴 colorScheme으로 한 번 계산하는 함수. 훅을 쓸 수 없는 정적 컨텍스트에서 사용합니다.

APICopy Anchor Link

ParametersCopy Anchor Link

ReturnCopy Anchor Link

사용 시 주의사항Copy Anchor Link

• SeedProvider 안에서 호출해야 colorMode와 preferredColorScheme을 읽습니다. Provider 밖에서는 lynx.__globalProps.theme이나 "light"로 동작합니다.
• 훅이므로 컴포넌트 본문에서만 호출할 수 있습니다. 테마 변경에 반응할 필요가 없다면 순수 함수인 getSeedClassName()을 사용하세요.