useTitle#

import { useTitle } from '@react-hooks-library/core'

function Demo() {
  const { title, setTitle } = useTitle()

  function setRawTitle() {
    const titleNode = document.head.querySelector('title')
    // This will also re-render the component
    titleNode.innerText = 'Some New Title'
  }

  return (
    <div>
      <div>Title - {title}</div>
      <input
        type="text"
        placeholder="start typing to update title"
        onChange={(e) => setTitle(e.target.value)}
      />

      <button onClick={setRawTitle}>set raw title</button>
    </div>
  )
}

function Demo() {
  const { title } = useTitle('Default Title')

  return (
    <div>
      <div>Title - {title}</div>
    </div>
  )
}

/**
 * Reactive document title hook
 *
 * Set title or observe dom mutation reactively
 *
 * @param newTitle optional
 * @see https://react-hooks-library.vercel.app/core/useTitle
 */
declare function useTitle(newTitle?: string): {
  title: string
  setTitle: react.Dispatch<react.SetStateAction<string>>
}