После выпуска React 16.8 (The One With Hooks) я приложил согласованные усилия для написания новых компонентов с использованием нового API React Hooks. Функция, которая меня больше всего интересовала, заключалась в совместном использовании пользовательского хука для нескольких компонентов в приложении. Именно тогда я заметил гибкость, которую могли обеспечить хуки, что было невозможно до того, как они были введены в экосистему React.
Мне стало любопытно, какие пользовательские крючки создает сообщество для решения своих собственных проблем. Я наткнулся на https://usehooks.com/, который является отличным ресурсом для обмена пользовательскими хуками с сообществом открытого исходного кода.
Я решил попробовать хук use-dark-mode (https://github.com/donavon/use-dark-mode), чтобы создать простое приложение, которое может переключаться между светлым и темным режим. Пользовательский хук сделал невероятно плавным переход между двумя разными режимами, просто добавив класс .dark-mode к атрибуту body всякий раз, когда активируется темный режим. Существует множество вариантов настройки функциональности хука, но для моего приложения было достаточно настроек по умолчанию.
Демо
Переключение между темным и светлым режимом в моем приложении приведет к замене основного логотипа New York Knicks их дополнительным логотипом. Это также сгенерирует случайную цитату Уолта «Клайда» Фрейзера, потому что мы все могли бы использовать еще немного «Клайда» в нашей жизни.
