Эта статья изначально была опубликована в моем личном блоге Смакошь.
В этой быстрой статье я буду реализовывать темный режим в приложении Quick React с помощью настраиваемого хука React,
Прежде чем мы начнем, давайте посмотрим, как это должно работать, в три простых шага:
- Сначала мы проверим, не хранится ли выбранная тема в localStorage.
- Если он существует, мы просто установим его как тему по умолчанию.
- В противном случае нам придется использовать светлую тему по умолчанию.
Итак, приступим!
Давайте начнем с настройки пользовательского хука, мы будем использовать useEffect
& useState
imported from React, мы проверим localStorage, когда компонент монтируется в первый раз, а затем мы выполним второй шаг!
import { useEffect, useState } from 'react'
export default () => {
const [theme, setTheme] = useState('light')
useEffect(() => {
const localTheme = localStorage.getItem('theme')
if (localTheme) {
setTheme(localTheme)
}
}, [])
}
Теперь давайте настроим функцию, которая переключает темы
import { useEffect, useState } from 'react'
export default () => {
const [theme, setTheme] = useState('light')
const toggleTheme = () => {
if (theme === 'dark') {
setTheme('light')
} else {
setTheme('dark')
}
}
useEffect(() => {
const localTheme = localStorage.getItem('theme')
if (localTheme) {
setTheme(localTheme)
}
}, [])
}
Теперь все хорошо, нам нужно только вернуть значение темы вместе с функцией, чтобы мы могли получить к ней доступ, когда мы импортируем настраиваемую ловушку!
import { useEffect, useState } from 'react'
export default () => {
const [theme, setTheme] = useState('light')
const toggleTheme = () => {
if (theme === 'dark') {
setTheme('light')
} else {
setTheme('dark')
}
}
useEffect(() => {
const localTheme = localStorage.getItem('theme')
if (localTheme) {
setTheme(localTheme)
}
}, [])
return {
theme,
toggleTheme,
}
}
Наконец, давайте посмотрим, как мы можем использовать его при импорте.
import React from 'react'
import useDarkMode from './useDarkMode'
export default () => {
const { theme, toggleTheme } = useDarkMode()
return (
<div
style={{
background: theme === 'dark' ? '#000' : '#fff',
color: theme === 'dark' ? '#fff' : '#000',
}}
>
<button type="button" onClick={toggleTheme}>
Switch theme
</button>
</div>
)
}
Вы можете найти полный пример здесь