this post was submitted on 19 Jan 2024
10 points (100.0% liked)

React

910 readers
1 users here now

A community for discussing anything related to the React UI framework and it's ecosystem.

https://react.dev/

Wormhole

[email protected]

Icon base by Skoll under CC BY 3.0 with modifications to add a gradient

founded 1 year ago
MODERATORS
 

I use React Helmet. I wanted to inject social meta tags in some of the pages. In order to DRY, I wanted to define these social meta tags as a separate component, which looks as below:

type SocialMetaProps = {
  title: string,
  description: string,
}

const SocialMeta = ({ title, description }: SocialMetaProps) => {
  return (
    <>
      <meta property="og:title" content={title} />
      <meta property="og:description" content={description} />
      <meta property="og:url" content={window.location.href} />

      <meta property="twitter:title" content={title} />
      <meta property="twitter:description" content={description} />
      <meta property="twitter:url" content={window.location.href} />
    </>
  )
}

export default SocialMeta

...which looks as such when I use it in a page:

<Helmet>
  <title>{resource.title}</title>
  <SocialMeta title={resource.title} description={resource.shortDescription} />
</Helmet>

The problem with that is that SocialMeta component does not render anything. I can confirm it by firing up browser console and doing document.head.getElementsByTagName("meta"). However, if I do it as below:

<Helmet>
  <title>{resource.title}</title>
  
  <meta property="og:title" content={resource.title} />
  <meta property="og:description" content={resource.shortDescription} />
  <meta property="og:url" content={window.location.href} />

  <meta property="twitter:title" content={resource.title} />
  <meta property="twitter:description" content={resource.shortDescription} />
  <meta property="twitter:url" content={window.location.href} />
</Helmet>

...it naturally renders the tags.

My best guess is that Helmet does not unpack <></>. Is there a way to render a custom component inside Helmet component?

Thanks in advance.


Environment

  • Vite
  • Typescript
  • React ^18.2.0
  • Helmet ^6.1.0
  • React Router (DOM) ^6.20.1 (if relevant)
all 3 comments
sorted by: hot top controversial new old
[–] mattd 3 points 9 months ago (2 children)

Yeah, Helmet doesn’t support Fragments

I think one workaround is to return an array of meta tags instead of using Fragments

Another way is to have your component wrap the meta tags in Helmet instead of Fragment, and call it next to page level Helmet

[–] erayerdin 3 points 9 months ago

Using an array and unpacking seems the most genius hacky solution to this problem. Imma go with that I guess.