모두를 위한 UseDarkMode 반응 후크!

그래서 얼마 전에 개발 중에 문제를 발견했습니다.

typescript를 사용하여 nextjs에서 솔루션을 만들고 내 css를 돕기 위해 tailwind를 사용했습니다.

즉시 사용할 수 있는 Tailwind는 다음을 수행하여 정말 쉽게 다양한 스타일링을 위한 다크 모드 지원을 제공합니다.

<div class='bg-white dark:bg-black'>Hello World </div>

그러나 다른 부분을 시스템으로 변경하려면 내 반응 응용 프로그램 내에서 사용자가 언제 어두운 모드에 있는지 알아야 했습니다. 그래서 다른 솔루션을 찾기 위해 npm을 살펴보기 시작했지만 운이 거의 없었기 때문에 테일윈드가 다크 모드를 찾는 방법을 가져와 반응 후크에 넣기로 결정했습니다.

이것은 useDarkMode이 작용하는 곳입니다. 처음에는 당시 작업하던 저장소 내부에 이것을 만들었지만 이것이 작동한다는 것을 증명한 후 곧 많은 다른 개발자들에게 도움이 될 수 있다는 것을 깨달았습니다.

패키지에는 유형도 포함되어 있으므로 Typescript를 사용하는 사람들은 유형 안전을 보장할 수 있고, 잘 못하는 사람들도... 그것도 괜찮습니다!

그래서 새 리포지토리를 만들고 npm: https://www.npmjs.com/package/use-dark-mode-ts 에 게시했습니다.

사용하기 정말 쉽고 간단합니다. 아래 코드는 다음과 같습니다.

import { useDarkMode } from 'use-dark-mode-ts';

const ExampleComponent = () => {
    const isDarkMode = useDarkMode();

    return (
        <>
            {
                isDarkMode
                ? (<div>I am in dark mode </div>)
                : (<div>I am not in dark mode </div>)
            }
        </>
    )
}

지금은 결코 완벽하지 않으며 이 분야에서 더 많은 경험을 가진 사람들이 더 매끄럽게 만드는 데 기여할 수 있습니다. 하지만 지금은 여기까지 왔고 이 글을 쓰는 시점에 주간 다운로드 수가 4.2k로 폭발적으로 증가했습니다.

최대한 많은 분들께 도움이 되었으면 좋겠습니다!