React Entegrasyonu: useLocale Hook Dokümantasyonu

Bu bölüm, react-intlayer kütüphanesinden useLocale hook'una ilişkin kapsamlı detaylar sağlar, React uygulamalarında yerel ayar yönetimini yönetmek için tasarlanmıştır.

React'te useLocale İçe Aktarma

useLocale hook'unu React uygulamanıza entegre etmek için ilgili paketten içe aktarın:

import { useLocale } from "react-intlayer"; // React bileşenlerinde yerel ayar yönetimi için kullanılır

Genel Bakış

useLocale hook'u, React bileşenlerinde yerel ayar ayarlarına erişmek ve bunları değiştirmek için kolay bir yol sağlar. Mevcut yerel ayara, varsayılan yerel ayara, tüm kullanılabilir yerel ayarlara ve uygulama bağlamında yerel ayar ayarlarını güncellemek için işlevlere erişim sağlar.

Kullanım

React bileşeninde useLocale hook'unu nasıl kullanabileceğiniz:

import type { FC } from "react";
import { useLocale } from "react-intlayer";

const LocaleSwitcher: FC = () => {
  const { locale, defaultLocale, availableLocales, setLocale } = useLocale();

  return (
    <div>
      <h1>Mevcut Yerel Ayar: {locale}</h1>
      <p>Varsayılan Yerel Ayar: {defaultLocale}</p>
      <select value={locale} onChange={(e) => setLocale(e.target.value)}>
        {availableLocales.map((loc) => (
          <option key={loc} value={loc}>
            {loc}
          </option>
        ))}
      </select>
    </div>
  );
};

export default LocaleSwitcher;

Parametreler ve Dönüş Değerleri

useLocale hook'unu çağırdığınızda, aşağıdaki özellikleri içeren bir nesne döndürür:

• locale: React bağlamında ayarlanan mevcut yerel ayar.
• defaultLocale: Yapılandırmada tanımlanan birincil yerel ayar.
• availableLocales: Yapılandırmada tanımlanan tüm kullanılabilir yerel ayarların listesi.
• setLocale: Uygulamanın bağlamında mevcut yerel ayarı güncellemek için bir işlev.

Örnek

Bu örnek, useLocale hook'unu kullanarak uygulamanın yerel ayarını dinamik olarak değiştirmek için bir yerel ayar değiştirici oluşturan bir bileşeni gösterir:

import type { FC } from "react";
import { useLocale } from "react-intlayer";

const LocaleSelector: FC = () => {
  const { locale, setLocale, availableLocales } = useLocale();

  const handleLocaleChange = (newLocale) => {
    setLocale(newLocale);
  };

  return (
    <select value={locale} onChange={(e) => handleLocaleChange(e.target.value)}>
      {availableLocales.map((locale) => (
        <option key={locale} value={locale}>
          {locale}
        </option>
      ))}
    </select>
  );
};

Sonuç

react-intlayer'dan useLocale hook'u, React uygulamalarınızda yerel ayarları yönetmek için önemli bir araçtır, uygulamanızı çeşitli uluslararası kitlelere uyarlamak için gereken işlevselliği sağlar.