useTitle

useTitle returns a component that calls the <Title> passed to the <Refine>. In this way, it becomes easier for us to access this component in various parts of the application.

Usage

Normally refine provides a default title. If we want to build a custom title instead of default one that comes with refine, we need to overwrite it like this:

src/App.tsx

import { Refine } from '@pankod/refine-core'
import routerProvider from '@pankod/refine-react-router-v6'
import dataProvider from '@pankod/refine-simple-rest'

import '@pankod/refine/dist/styles.min.css'

export const App: React.FC = () => {
  return (
    <Refine
      routerProvider={routerProvider}
      dataProvider={dataProvider('https://api.fake-rest.refine.dev')}
      Title={({ collapsed }) => (
        <div>
          {collapsed && <img src="./logo" alt="Logo" />}
          <span>Custom Title</span>
        </div>
      )}
    />
  )
}

info

This <Title> we created is used in the <Sider> that refine provides by default.

Now useTitle will provides us to access to the <Title> component from various parts of the application, like this:

src/components/customSider

import { useTitle } from '@pankod/refine-core'
import { AntdLayout } from '@pankod/refine-antd'

export const CustomSider: React.FC = () => {
  const [collapsed, setCollapsed] = React.useState(false)
  const Title = useTitle()

  return (
    <AntdLayout.Sider
      collapsible
      breakpoint="md"
      collapsed={collapsed}
      onCollapse={(collapsed: boolean): void => setCollapsed(collapsed)}
    >
      <Title collapsed={collapsed} />
      ...
    </AntdLayout.Sider>
  )
}