ماهو خطاف useTheme

إن خطاف useTheme هو خطاف مخصص (Custom Hook) في React وهو يوفر لك وصول سهل إلى السمات (themes) الخاصة بالتطبيق أو إعدادات التصميم. 

فهو طريقة للحصول على البيانات المتعلقة بالتصميم مثل الألوان والخطوط و المسافات وغيرها في أي مكون React يحتاجها.

فمثلا لو أن لديك تطبيق أو مشروع وتريد توفير إمكانية للمستخدم أن يقوم تبديل المظهر مثلا بين الوضع العادي والوضع الليلي أو من الممكن أن تريد إستخدام مجموعة معينة من الألوان والخطوط يقوم بإختيارها المستخدم.

لذلك بدون useTheme سيتوجب عليك تمرير هذه السمات ك props إلى كل مكون يحتاجها وهذا الأمر سيكون صعبا وسيأخذ وقت كبير.

فمثلا :

أولا يجب إنشاء سياق الثيم (Theme Context) حيث يتم إنشاء React.Context خاص لتخزين بيانات الثيم.

بعد ذلك إنشاء مزود السمة (Theme Provider) حيث يكون عبارة عن مكون ThemeContext.Provider يكون حول جزء من شجرة المكونات ويوفر قيمة السمة لهذا السياق.

وأخيرا خطاف useTheme حيث يستخدم useContext من React للوصول إلى القيمة المقدمة من ThemeContext.

فمثلا في ملف ThemeContext.js :

import React, { useContext, createContext } from 'react';

const ThemeContext = createContext(null);

export const ThemeProvider = ({ children, theme }) => {
  return (
    <ThemeContext.Provider value={theme}>
      {children}
    </ThemeContext.Provider>
  );
};

export const useTheme = () => {
  const context = useContext(ThemeContext);
  if (!context) {
    throw new Error('should use useTheme ThemeProvider');
  }
  return context;
};

ثانيا ملف App.js :

import React from 'react';
import { ThemeProvider } from './ThemeContext';
import MyComponent from './MyComponent';

const lightTheme = {
  colors: {
    background: '#FFFFFF',
    text: '#000000',
  },
  fonts: {
    primary: 'Arial',
  },
};

function App() {
  return (
    <ThemeProvider theme={lightTheme}>
      <MyComponent />
    </ThemeProvider>
  );
}

export default App;

والآن في المكون الذي تريد تغير الثيم له :

import React from 'react';
import { useTheme } from './ThemeContext';

function MyComponent() {
  const theme = useTheme();

  return (
    <div style={{ backgroundColor: theme.colors.background, color: theme.colors.text, fontFamily: theme.fonts.primary }}>
      <p>text</p>
    </div>
  );
}

export default MyComponent;

إذا إن useTheme هو أداة  تجعل إدارة وتطبيق ثيمات التطبيق في React منظم وإنشاءه بسهولة.