React useTitle hook
Sets the title of the page
- Use
typeof
to determine if theDocument
is defined or not. - Use the
useRef()
hook to store the original title of theDocument
, if defined. - Use the
useEffect()
hook to setDocument.title
to the passed value when the component mounts and clean up when unmounting.
const useTitle = title => { const documentDefined = typeof document !== 'undefined'; const originalTitle = React.useRef(documentDefined ? document.title : null); React.useEffect(() => { if (!documentDefined) return; if (document.title !== title) document.title = title; return () => { document.title = originalTitle.current; }; }, []); }; const Alert = () => { useTitle('Alert'); return <p>Alert! Title has changed</p>; }; const MyApp = () => { const [alertOpen, setAlertOpen] = React.useState(false); return ( <> <button onClick={() => setAlertOpen(!alertOpen)}>Toggle alert</button> {alertOpen && <Alert />} </> ); }; ReactDOM.createRoot(document.getElementById('root')).render( <MyApp /> );