document title في react

هناك مكتبة react-helmet يمكنك تثبيتها عن طريق npm أو yarn وهي تمكنك من وضع ال title و meta وأكثر ...

import React from 'react';
import {Helmet} from "react-helmet";


export default function Blog() {


  return (
  <>
  <Helmet>
  <title>المدونة</title>
  </Helmet>
    <div>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Nobis quos veniam commodi at.
      Corporis consequuntur dolor odit natus adipisci enim provident iusto atque consequatur amet
      minima, velit id cupiditate incidunt.
    </div>
  </>
  );
}

بدلاً من استخدام نفس المنطق لتعيين عنوان الصفحة في جميع المكونات في التطبيق الخاص بك ، يمكن بإنشاء  hook مخصص جديد نسميه مثلا ()useDocTitle والذي يساعدنا على إعادة إستخدام المنطق اللذي نريد في كل مكون على حدى. ويمكن فعل ذلك على الكل التالي:

import React, { useEffect, useState } from "react";

const useDocTitle = title => {
  const [doctitle, setDocTitle] = useState(title);

  useEffect(() => {
    document.title = doctitle;
  }, [doctitle]);

  return [doctitle, setDocTitle];
};

export {useDocTitle};

بعد ذلك يمكننا إستخدام useDocTitle لإعطاء عنوان جديد لكل صفحة  :

import {useDocTitle} from "customHooks"

export default function App() {
  const [doctitle, setDocTitle] = useDocTitle("Home page");

  return (
    <div className="App">
      <h1>Hello React</h1>
        {/* نغير العنوان ديناميكيا */}
      <button onClick={() => setDocTitle("الصفحة الرئيسية")}>
        Change title
      </button>
    </div>
  );
}