react-helmet-async Helmet TypeScript Examples

Source File: index.tsx From react-boilerplate-cra-template with MIT License

6 votes

export function NotFoundPage() {
  return (
    <>
      <Helmet>
        <title>404 Page Not Found</title>
        <meta name="description" content="Page not found" />
      </Helmet>
      <NavBar />
      <Wrapper>
        <Title>
          4
          <span role="img" aria-label="Crying Face">
            ?
          </span>
          4
        </Title>
        <P>Page not found.</P>
        <Link to={process.env.PUBLIC_URL + '/'}>Return to Home Page</Link>
      </Wrapper>
    </>
  );
}

Source File: index.tsx From interbtc-ui with Apache License 2.0

6 votes

InterlayHelmet = (): JSX.Element => (
  <Helmet>
    <link rel='apple-touch-icon' sizes='180x180' href={`/${PUBLIC_ASSETS_FOLDER_NAME}/apple-touch-icon.png`} />
    <link rel='icon' type='image/png' sizes='32x32' href={`/${PUBLIC_ASSETS_FOLDER_NAME}/favicon-32x32.png`} />
    <link rel='icon' type='image/png' sizes='16x16' href={`/${PUBLIC_ASSETS_FOLDER_NAME}/favicon-16x16.png`} />
    {/*
      manifest.json provides metadata used when your web app is installed on a
      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
    */}
    <link rel='mask-icon' href={`/${PUBLIC_ASSETS_FOLDER_NAME}/safari-pinned-tab.svg`} color='#5bbad5' />
    <link rel='shortcut icon' href={`/${PUBLIC_ASSETS_FOLDER_NAME}/favicon.ico`} />
    <meta name='msapplication-config' content={`/${PUBLIC_ASSETS_FOLDER_NAME}/browserconfig.xml`} />
    <link rel='manifest' href={`/${PUBLIC_ASSETS_FOLDER_NAME}/site.webmanifest`} />
    <title>{APP_NAME}</title>
    {/* Primary Meta Tags */}
    <meta name='title' content={APP_NAME} />
    <meta name='description' content={`${APP_NAME}: Trustless and open DeFi access for your Bitcoin`} />
    {/* Open Graph / Facebook */}
    <meta property='og:type' content='website' />
    <meta property='og:url' content={APP_DOMAIN} />
    <meta property='og:title' content={APP_NAME} />
    <meta property='og:description' content={`${APP_NAME}: Trustless and open DeFi access for your Bitcoin`} />
    <meta property='og:image' content={`${APP_DOMAIN}/${PUBLIC_ASSETS_FOLDER_NAME}/${OPEN_GRAPH_IMAGE_FILE_NAME}`} />
    <meta property='og:image:width' content='1200' />
    <meta property='og:image:height' content='598' />
    {/* Twitter */}
    <meta property='twitter:card' content='summary_large_image' />
    <meta property='twitter:url' content={APP_DOMAIN} />
    <meta property='twitter:title' content={APP_NAME} />
    <meta property='twitter:description' content={`${APP_NAME}: Trustless and open DeFi access for your Bitcoin`} />
    <meta
      property='twitter:image'
      content={`${APP_DOMAIN}/${PUBLIC_ASSETS_FOLDER_NAME}/${OPEN_GRAPH_IMAGE_FILE_NAME}`}
    />
  </Helmet>
)

Source File: App.tsx From cra-serverless with MIT License

6 votes

App: React.FC = () => (
  <>
    <GlobalStyles />

    <Helmet>
      <title>{process.env.REACT_APP_NAME}</title>
    </Helmet>

    <Wrapper>
      <Navigation />

      <Switch>
        <Route path="/details/:id" component={Details} />
        <Route path="/" component={Home} exact />

        <Route component={NotFound} />
      </Switch>

      <Footer />
    </Wrapper>
  </>
)

Source File: App.tsx From cra-pipeline with MIT License

6 votes

App: React.FC = () => (
  <Wrapper>
    <Helmet>
      <title>CRA Pipeline</title>
    </Helmet>
    <Header>
      <Logo alt="Create React App - Logo" />
      <p>
        Edit <code>src/App.tsx</code> and save to reload.
      </p>
      <Link href="https://reactjs.org">Learn React</Link>
    </Header>
  </Wrapper>
)

Source File: shareStoryPlayerPage.tsx From datart with Apache License 2.0

6 votes

export function ShareStoryPlayerPage() {
  const { i18n } = useTranslation();

  return (
    <ConfigProvider locale={antdLocales[i18n.language]}>
      <BrowserRouter>
        <Helmet
          title="Datart Share Link"
          htmlAttributes={{ lang: i18n.language }}
        >
          <meta name="description" content="Data Art" />
        </Helmet>
        <Switch>
          <Route
            path="/shareStoryPlayer/:token"
            component={LazyShareStoryPlayer}
          />
        </Switch>
        <GlobalStyles />
      </BrowserRouter>
    </ConfigProvider>
  );
}

Source File: applications.tsx From leek with Apache License 2.0

6 votes

ApplicationsPage = () => {
  return (
    <>
      <Helmet>
        <html lang="en" />
        <title>Applications</title>
        <meta name="description" content="Leek applications" />
        <meta name="keywords" content="leek, applications" />
      </Helmet>

      <Applications />
    </>
  );
}

Source File: shareDashboardPage.tsx From datart with Apache License 2.0

6 votes

export function ShareDashboardPage() {
  const { i18n } = useTranslation();

  return (
    <ConfigProvider locale={antdLocales[i18n.language]}>
      <BrowserRouter>
        <Helmet
          title="Datart Share Link"
          htmlAttributes={{ lang: i18n.language }}
        >
          <meta name="description" content="Data Art" />
        </Helmet>
        <Switch>
          <Route path="/shareDashboard/:token" component={LazyShareDashboard} />
        </Switch>
        <GlobalStyles />
      </BrowserRouter>
    </ConfigProvider>
  );
}

Source File: FallbackUi.tsx From itwin-viewer with MIT License

6 votes

FallbackUi = ({
  imageSource,
  imageAlt,
  className,
  title,
  text,
  withHelmet,
}: Props) => {
  const innerText = sanitizeHtml(text);
  return (
    <div className={classNames(styles.container, className)}>
      {withHelmet && <Helmet title={title} />}
      <div className={styles.content}>
        <img src={imageSource} alt={imageAlt} data-testid="test-fallback-img" />
        <p className={styles.title} data-testid="test-fallback-title">
          <Subheading2>{title}</Subheading2>
        </p>
        <p className={styles.message} data-testid="test-fallback-text">
          <Subheading dangerouslySetInnerHTML={{ __html: innerText }} />
        </p>
      </div>
    </div>
  );
}

Source File: App.tsx From akashlytics with GNU General Public License v3.0

6 votes

export function App() {
  const mediaQuery = useMediaQueryContext();
  const classes = useStyles();

  return (
    <div>
      <Helmet defaultTitle="Akashlytics" titleTemplate="Akashlytics - %s" />

      <Header />

      <BetaBanner />

      <div className={clsx(classes.appBody, { [classes.appBodySmall]: mediaQuery.smallScreen })}>
        <Switch>
          <Redirect from="/revenue/daily" to="/graph/daily-akt-spent" />
          <Redirect from="/revenue/total" to="/graph/total-akt-spent" />
          <Route path="/faq">
            <Faq />
          </Route>
          <Route path="/price-compare">
            <PriceCompare />
          </Route>
          <Route path="/graph/:snapshot">
            <Graph />
          </Route>
          <Route path="/deploy">
            <Deploy />
          </Route>
          <Route path="/">
            <Home />
          </Route>
        </Switch>
      </div>

      <Footer />
    </div>
  );
}

Source File: index.tsx From react-boilerplate-cra-template with MIT License

6 votes

export function HomePage() {
  return (
    <>
      <Helmet>
        <title>Home Page</title>
        <meta
          name="description"
          content="A React Boilerplate application homepage"
        />
      </Helmet>
      <NavBar />
      <PageWrapper>
        <Masthead />
        <Features />
      </PageWrapper>
    </>
  );
}

Source File: index.tsx From oasis-wallet-web with Apache License 2.0

6 votes

export function App() {
  useRouteRedirects()
  const { i18n } = useTranslation()
  const size = useContext(ResponsiveContext)

  return (
    <ModalProvider>
      <Helmet
        titleTemplate="%s - Oasis Wallet"
        defaultTitle="Oasis Wallet"
        htmlAttributes={{ lang: i18n.language }}
      >
        <meta name="description" content="A wallet for Oasis" />
      </Helmet>
      <Box direction="row-responsive" background="background-back" fill style={{ minHeight: '100vh' }}>
        <Navigation />
        <Box flex pad={{ top: size === 'small' ? '64px' : undefined }}>
          <AppMain>
            <FatalErrorHandler />
            <Toolbar />
            <TransitionGroup>
              <Switch>
                <TransitionRoute exact path="/" component={HomePage} />
                <TransitionRoute exact path="/create-wallet" component={CreateWalletPage} />
                <TransitionRoute path="/open-wallet" component={OpenWalletPage} />
                <TransitionRoute exact path="/account/:address/stake" component={AccountPage} />
                <TransitionRoute path="/account/:address" component={AccountPage} />
              </Switch>
            </TransitionGroup>
            <Footer />
          </AppMain>
        </Box>
      </Box>
    </ModalProvider>
  )
}

Source File: index.tsx From react-boilerplate-cra-template with MIT License

6 votes

export function HomePage() {
  return (
    <>
      <Helmet>
        <title>HomePage</title>
        <meta name="description" content="A Boilerplate application homepage" />
      </Helmet>
      <span>My HomePage</span>
    </>
  );
}

Source File: main.component.tsx From filecoin-CID-checker with Apache License 2.0

6 votes

Main = () => {
  return (
    <HelmetProvider>
      <Router>
        <MainWrapper>
          <Helmet>
            <title>{DOCUMENT_TITLE}</title>
            <meta content={DOCUMENT_DESCRIPTION} name="description" />
          </Helmet>
          <SearchProvider>
            <Header />
            <Body>
              <Switch>
                <Route exact path={['/', '/deal/:deal', '/:search']} component={Deals} />
                <Redirect to="/" />
              </Switch>
            </Body>
          </SearchProvider>
        </MainWrapper>
      </Router>
    </HelmetProvider>
  )
}

Source File: Page.tsx From vvs-ui with GNU General Public License v3.0

6 votes

PageMeta: React.FC<{ symbol?: string }> = ({ symbol }) => {

  const pageMeta = { title: 'Home | VVS Finance' }
  const { title, description, image } = { ...DEFAULT_META, ...pageMeta }
  
  const pageTitle = title

  return (
    <Helmet>
      <title>{pageTitle}</title>
      <meta property="og:title" content={title} />
      <meta property="og:description" content={description} />
      <meta property="og:image" content={image} />
    </Helmet>
  )
}

Source File: social-profile.tsx From gatsby-plugin-next-seo with MIT License

6 votes

SocialProfileJsonLd: FC<SocialProfileJsonLdProps> = ({
  type,
  name,
  url,
  sameAs = [],
  defer = false,
}) => {
  const jsonld = `{
    "@context": "http://schema.org",
    "@type": "${type}",
    "name": "${name}",
    "url": "${url}",
    "sameAs": [
      ${sameAs.map((socialUrl) => `"${socialUrl}"`).toString()}
     ]
  }`;

  return (
    <Helmet defer={defer}>
      <script type='application/ld+json'>{jsonld}</script>
    </Helmet>
  );
}

Source File: FallbackUi.tsx From viewer with MIT License

6 votes

FallbackUi = ({
  imageSource,
  imageAlt,
  className,
  title,
  text,
  withHelmet,
}: Props): JSX.Element => {
  const innerText = sanitizeHtml(text);
  return (
    <div className={classNames(styles.container, className)}>
      {withHelmet && <Helmet title={title} />}
      <div className={styles.content}>
        <img src={imageSource} alt={imageAlt} data-testid="test-fallback-img" />
        <Headline className={styles.title} data-testid="test-fallback-title">
          <Title>{title}</Title>
        </Headline>
        <Headline className={styles.message} data-testid="test-fallback-text">
          <Subheading dangerouslySetInnerHTML={{ __html: innerText }} />
        </Headline>
      </div>
    </div>
  );
}

Source File: Layout.tsx From react-pokedex with MIT License

6 votes

Layout = ({ children, title }: Props) => {
  return (
    <>
      <Helmet>
        <meta charSet="utf-8" />
        <title>React Pokédex {title && `| ${title}`}</title>
        <meta
          name="description"
          content="a simple pokédex for your pokemon needs."
        />
      </Helmet>
      <Navbar />
      <div className="px-2 md:px-24 lg:px-64 pt-24">{children}</div>
    </>
  );
}

Source File: Page1.tsx From glide-frontend with GNU General Public License v3.0

6 votes

PageMeta: React.FC<{ symbol?: string }> = ({ symbol }) => {
  const { t } = useTranslation()
  const { pathname } = useLocation()
  const cakePriceUsd = useCakeUsdcPrice()
  const cakePriceUsdDisplay = cakePriceUsd ? `$${cakePriceUsd.toFixed(3)}` : '...'

  const pageMeta = getCustomMeta(pathname, t) || {}
  const { title, description, image } = { ...DEFAULT_META, ...pageMeta }
  let pageTitle = cakePriceUsdDisplay ? [title, cakePriceUsdDisplay].join(' - ') : title
  if (symbol) {
    pageTitle = [symbol, title].join(' - ')
  }

  return (
    <Helmet>
      <title>{pageTitle}</title>
      <meta property="og:title" content={title} />
      <meta property="og:description" content={description} />
      <meta property="og:image" content={image} />
    </Helmet>
  )
}

Source File: Home.tsx From akashlytics with GNU General Public License v3.0

6 votes

Home: React.FunctionComponent<IHomeProps> = ({}) => {
  const { data: dashboardData, status } = useDashboardData();
  const classes = useStyles();
  const mediaQuery = useMediaQueryContext();

  return (
    <>
      <Helmet title="Dashboard" />
      <div className={clsx("container")}>
        {dashboardData ? (
          <>
            <Dashboard dashboardData={dashboardData} />

            <div className="row mt-5">
              <div
                className={clsx("col-12", classes.refreshDate, {
                  "text-center": mediaQuery.smallScreen
                })}
              >
                Last updated: <FormattedDate value={dashboardData.now.date} /> <FormattedTime value={dashboardData.now.date} />
              </div>
            </div>
          </>
        ) : (
          <div className="text-center">
            <CircularProgress size={80} />
          </div>
        )}
      </div>
    </>
  );
}

Source File: index.tsx From react-pokedex with MIT License

6 votes

ReactDOM.render(
  <React.StrictMode>
    <HelmetProvider>
      <Helmet>
        <meta charSet="utf-8" />
        <title>React Pokédex</title>
        <meta
          name="description"
          content="a simple pokédex for your pokemon needs."
        />
      </Helmet>
      <Provider store={store}>
        <App />
      </Provider>
    </HelmetProvider>
  </React.StrictMode>,
  document.getElementById("root")
);

Source File: Page.tsx From vvs-ui with GNU General Public License v3.0

6 votes

OpenGraphTag = ({ title, description, canonical, ogImageUrl, siteName }: OpenGraphMeta) => {
  // if (!ogImageUrl) return null

  return (
    <Helmet>
      <meta name="og:title" content={title} />
      <meta name="og:image" content={ogImageUrl} />
      <meta name="og:url" content={canonical} />
      <meta name="og:description" content={description} />
      <meta name="og:type" content="website" />
      <meta name="og:site_name" content={siteName} />
    </Helmet>
  )
}

Source File: HtmlMeta.tsx From mkn with MIT License

6 votes

HtmlMeta: React.FC<IProps> = (props) => {
  const siteName = props.disableSiteName ? '' : ` - ${config.app.NAME}`;

  return (
    <Helmet>
      <title>
        {props.title || ''}
        {siteName}
      </title>
    </Helmet>
  );
}

Source File: HelmetSocial.tsx From akashlytics with GNU General Public License v3.0

6 votes

HelmetSocial: React.FunctionComponent<IHelmetSocialProps> = (props) => {
  const {
    title,
    description,
    children,
    googleImageUrl,
    twitterImageUrl,
    otherImageUrl,
    otherImageWidth,
    otherImageHeight,
  } = props;

  return (
    <Helmet>
      <title>{title}</title>
      {description && <meta name="description" content={description} />}

      {/* Google Plus */}
      <meta itemProp="name" content={title} />
      {description && <meta itemProp="description" content={description} />}
      {googleImageUrl && <meta itemProp="image" content={googleImageUrl} />}

      {/* Twitter */}
      <meta name="twitter:title" content={title} />
      {description && <meta name="twitter:description" content={description} />}
      {twitterImageUrl && <meta name="twitter:image:alt" content={title} />}
      {twitterImageUrl && <meta name="twitter:image" content={twitterImageUrl} />}

      {/* Others */}
      <meta property="og:title" content={title} />
      {description && <meta property="og:description" content={description} />}
      {otherImageUrl && <meta property="og:image" content={otherImageUrl} />}
      {otherImageUrl && <meta property="og:image:width" content={otherImageWidth.toString()} />}
      {otherImageUrl && <meta property="og:image:height" content={otherImageHeight.toString()} />}

      {children}
    </Helmet>
  );
}

Source File: index.tsx From datart with Apache License 2.0

5 votes

export function App() {
  const dispatch = useDispatch();
  const { i18n } = useTranslation();
  const logged = !!getToken();
  const t = useI18NPrefix('global');
  useAppSlice();

  useLayoutEffect(() => {
    if (logged) {
      dispatch(setLoggedInUser());
    } else {
      if (localStorage.getItem(StorageKeys.LoggedInUser)) {
        message.warning(t('tokenExpired'));
      }
      dispatch(logout());
    }
  }, [dispatch, t, logged]);

  useEffect(() => {
    dispatch(getSystemInfo());
  }, [dispatch]);

  return (
    <ConfigProvider locale={antdLocales[i18n.language]}>
      <BrowserRouter>
        <Helmet
          titleTemplate="%s - Datart"
          defaultTitle="Datart"
          htmlAttributes={{ lang: i18n.language }}
        >
          <meta name="description" content="Data Art" />
        </Helmet>
        <Switch>
          <Route path="/login" component={LazyLoginPage} />
          <Route path="/register" component={LazyRegisterPage} />
          <Route path="/active" component={LazyActivePage} />
          <Route path="/forgetPassword" component={LazyForgetPasswordPage} />
          <Route
            path="/authorization/:token"
            component={LazyAuthorizationPage}
          />
          <LoginAuthRoute />
        </Switch>
        <GlobalStyles />
      </BrowserRouter>
    </ConfigProvider>
  );
}

Source File: index.tsx From vvs-ui with GNU General Public License v3.0

5 votes

Predictions = () => {
  const { isDesktop } = useMatchBreakpoints()
  const [hasAcceptedRisk, setHasAcceptedRisk] = useUserPredictionAcceptedRisk()
  const [showDisclaimer] = useUserPredictionChartDisclaimerShow()
  const { account } = useWeb3React()
  const status = useGetPredictionsStatus()
  const isChartPaneOpen = useIsChartPaneOpen()
  const dispatch = useAppDispatch()
  const initialBlock = useInitialBlock()
  const handleAcceptRiskSuccess = () => setHasAcceptedRisk(true)
  const [onPresentRiskDisclaimer] = useModal(<RiskDisclaimer onSuccess={handleAcceptRiskSuccess} />, false)
  const [onPresentChartDisclaimer] = useModal(<ChartDisclaimer />, false)

  // TODO: memoize modal's handlers
  const onPresentRiskDisclaimerRef = useRef(onPresentRiskDisclaimer)
  const onPresentChartDisclaimerRef = useRef(onPresentChartDisclaimer)

  // Disclaimer
  useEffect(() => {
    if (!hasAcceptedRisk) {
      onPresentRiskDisclaimerRef.current()
    }
  }, [hasAcceptedRisk, onPresentRiskDisclaimerRef])

  // Chart Disclaimer
  useEffect(() => {
    if (isChartPaneOpen && showDisclaimer) {
      onPresentChartDisclaimerRef.current()
    }
  }, [onPresentChartDisclaimerRef, isChartPaneOpen, showDisclaimer])

  useEffect(() => {
    if (initialBlock > 0) {
      // Do not start initialization until the first block has been retrieved
      dispatch(initializePredictions(account))
    }
  }, [initialBlock, dispatch, account])

  usePollPredictions()
  usePollOraclePrice()

  if (status === PredictionStatus.INITIAL) {
    return <PageLoader />
  }

  return (
    <>
      <Helmet>
        <script src="https://s3.tradingview.com/tv.js" type="text/javascript" id="tradingViewWidget" />
      </Helmet>
      <SEOHead />
      <SwiperProvider>
        <Container>
          {isDesktop ? <Desktop /> : <Mobile />}
          <CollectWinningsPopup />
        </Container>
      </SwiperProvider>
    </>
  )
}

Source File: Meta.tsx From react-pwa with MIT License

5 votes

function Meta({
  description = defaultMetaTags.description,
  meta = [],
  title,
  image = defaultMetaTags.image,
}: MetaProps) {
  const pageTitle = `${appTitle}${title ? ' | ' + title : ''}`;

  return (
    <Helmet
      title={pageTitle}
      meta={[
        {
          name: 'description',
          content: description,
        },
        {
          property: 'og:title',
          content: pageTitle,
        },
        {
          property: 'og:description',
          content: description,
        },
        {
          property: 'og:type',
          content: 'website',
        },
        {
          property: 'og:image',
          content: image,
        },
        {
          name: 'twitter:card',
          content: 'summary',
        },
        {
          name: 'twitter:title',
          content: pageTitle,
        },
        {
          name: 'twitter:description',
          content: description,
        },
      ].concat(meta)}
    />
  );
}

Source File: task.tsx From leek with Apache License 2.0

5 votes

TaskPage: React.FC = () => {
  // STATE
  const service = new TaskService();
  const { currentApp } = useApplication();
  const [qpTaskUUID, setQPTaskUUID] = useQueryParam("uuid", StringParam);
  const [task, setTask] = useState({});

  // Data
  const [loading, setLoading] = useState<boolean>(false);

  // API Calls
  function getTaskByUUID(uuid: string) {
    if (!currentApp) return;
    setLoading(true);
    service
      .getById(currentApp, uuid)
      .then(handleAPIResponse)
      .then((result: any) => {
        if (result.hits.hits.length > 0) {
          setTask(result.hits.hits[0]._source);
        }
      }, handleAPIError)
      .catch(handleAPIError)
      .finally(() => setLoading(false));
  }

  useEffect(() => {
    // Stop refreshing metadata
    if (timeout) clearInterval(timeout);
    if (qpTaskUUID) {
      getTaskByUUID(qpTaskUUID);
    }
    timeout = setInterval(() => {
      if (qpTaskUUID) {
        getTaskByUUID(qpTaskUUID);
      }
    }, 5000);

    return () => {
      clearInterval(timeout);
    };
  }, []);

  return (
    <>
      <Helmet>
        <html lang="en" />
        <title>Task detail</title>
        <meta name="description" content="Task details" />
        <meta name="keywords" content="celery, task" />
      </Helmet>

      <Row
        justify="center"
        style={{ marginTop: "20px", width: "100%" }}
        gutter={[12, 12]}
      >
        {task && Object.keys(task).length > 0 && (
          <TaskDetails task={task} loading={loading} />
        )}

        {task && Object.keys(task).length === 0 && (
          <Empty description={<Title level={3}>Waiting task...</Title>} />
        )}
      </Row>
    </>
  );
}

Source File: Error.tsx From cra-serverless with MIT License

5 votes

NotFound = () => (
  <>
    <Helmet>
      <title>Not Found</title>
    </Helmet>
    <h2>Not Found</h2>
  </>
)

Source File: index.tsx From WEB_CodeSquare_AmongUs with MIT License

5 votes

ReactDOM.render(
  <React.StrictMode>
    <Provider store={store}>
      <HelmetProvider>
        <BrowserRouter>
          <Helmet>
            <link
              rel="apple-touch-icon"
              sizes="180x180"
              href="/apple-touch-icon.png"
            />
            <link
              rel="icon"
              type="image/png"
              sizes="32x32"
              href="/favicon-32x32.png"
            />
            <link
              rel="icon"
              type="image/png"
              sizes="16x16"
              href="/favicon-16x16.png"
            />
            <link rel="manifest" href="/site.webmanifest" />
            <link
              rel="mask-icon"
              href="/safari-pinned-tab.svg"
              color="#5bbad5"
            />
            <meta name="msapplication-TileColor" content="#2b5797" />
            <meta name="theme-color" content="#ffffff" />
          </Helmet>
          <Global styles={GlobalStyles} />
          <App />
        </BrowserRouter>
      </HelmetProvider>
    </Provider>
  </React.StrictMode>,
  document.getElementById("root"),
);

react-helmet-async#Helmet TypeScript Examples