Helpers
useLocaleSelector
Справочное руководство по API хука useLocaleSelector
Обзор
Этот хук возвращает текущую локаль, список локалей, хук useSetLocale и функцию для получения свойств локали.
Это облегчает создание собственного компонента выбора локали.
Если вы не хотите реализовывать свой компонент, воспользуйтесь компонентом <LocaleSelector>.
Справочные материалы
Возвращает
Объект, содержащий текущую локаль, список локалей, хук useSetLocale и функцию для получения свойств локали.
Примеры
<LocaleSelector>
Это пример реализации компонента <LocaleSelector>.
export default function LocaleSelector({
locales: _locales,
...props
}: {
locales?: string[];
[key: string]: any;
}): React.JSX.Element | null {
// Получаем свойства селектора локали
const { locale, locales, setLocale, getLocaleProperties } = useLocaleSelector(
_locales ? _locales : undefined
);
// Получаем отображаемое название
const getDisplayName = (locale: string) => {
return capitalizeLanguageName(
getLocaleProperties(locale).nativeNameWithRegionCode
);
};
// Если локали не возвращены, ничего не рендерим или обрабатываем корректно
if (!locales || locales.length === 0 || !setLocale) {
return null;
}
return (
<select
{...props}
// Резервное значение — пустая строка, если currentLocale не определён
value={locale || ''}
onChange={(e) => setLocale(e.target.value)}
>
{/* Опциональное резервное значение, если локаль не установлена */}
{!locale && <option value='' />}
{locales.map((locale) => (
<option key={locale} value={locale} suppressHydrationWarning>
{getDisplayName(locale)}
</option>
))}
</select>
);
}Примечания
- Этот хук доступен только на стороне клиента.
- Подробнее о строках локали читайте здесь.
Дальнейшие шаги
- Подробнее о компоненте
<LocaleSelector>. - Подробнее о хуке
useLocale.
Насколько полезно это руководство?