{t(title)} | Cal.com

import Head from "next/head"; import React, { createContext, useContext, useState } from "react"; import { useLocale } from "@calcom/lib/hooks/useLocale"; type MetaType = { title: string; description: string; }; const initialMeta = { title: "", description: "", }; const MetaContext = createContext({ meta: initialMeta, // eslint-disable-next-line @typescript-eslint/no-empty-function setMeta: (newMeta: Partial) => {}, }); export function useMeta() { return useContext(MetaContext); } export function MetaProvider({ children }: { children: React.ReactNode }) { const [value, setValue] = useState(initialMeta); const setMeta = (newMeta: Partial) => { setValue((v) => ({ ...v, ...newMeta })); }; return {children}; } /** * The purpose of this component is to simplify title and description handling. * Similarly to `next/head`'s `Head` component this allow us to update the metadata for a page * from any children, also exposes the metadata via the `useMeta` hook in case we need them * elsewhere (ie. on a Heading, Title, Subtitle, etc.) * @example */ export default function Meta({ title, description }: MetaType) { const { t } = useLocale(); const { setMeta, meta } = useMeta(); /* @TODO: maybe find a way to have this data on first render to prevent flicker */ if (meta.title !== title || meta.description !== description) { setMeta({ title, description }); } return ( {t(title)} | Cal.com ); }