react-meta-elements

Sets document title and meta tags using React elements or hooks. A lightweight alternative to React Helmet.

Usage

This package exposes Title, Meta and Link components. Use them in the same way you would use their respective HTML elements; they will automatically be mounted onto document.head.

import { Title, Meta } from 'react-meta-elements'
 
const MyComponent = () => {
  return (
    <>
      <Title>Hello world!</Title>
      <Meta name='description' content='This is a description' />
    </>
  )
}

More examples

<Title>title here</Title>
<Title title='title here' />
 
<Title>title here</Title>
<Meta name='description' content='This is a description' />
<Meta property='og:description' content='This is a description' />
 
<Link rel='canonical' content='https://google.com/' />

Prior art

react-meta-elements is similar to other packages, but in general, it tries to keep the API as simple as possible, without the need for "wrapper" elements.

react-meta-elements	react-helmet	react-head	react-meta-tags
<Title>title here</Title>   <Meta   name='description'   content='This is a description' />	<Helmet>   <title>title here</title>   <meta     name='description'     content='This is a description'   /> </Helmet> Alternate syntax: <Helmet   title='title here'   meta={[     { name: 'description',       content: 'This is a description' }   ]} />	<HeadProvider>   <Title>title here</Title>   <Meta     name='description'     content='This is a description'   /> </HeadProvider>	<HeadProvider headTags={[]}>   <MetaTags>     <title>title here</title>     <meta       name='description'       content='This is a description'     />   </MetaTags> </HeadProvider>

• Helmet: Helmet is a full-featured head tag manager. At time of writing, you need to use v6 (beta) to make it work in a project with React hooks, which is incompatible with the stable v5.

  Unfortunately, this incompatibility makes Helmet not viable for use in reusable packages that may be embedded into projects that may use different versions of Helmet.

• react-head: This package follows a very similar API to react-head's. However, react-head requires that you place your entire application into a provider component (HeadProvider), while this package doesn't require that.

Thanks

react-meta-elements © 2019, Rico Sta. Cruz. Released under the MIT License.
Authored and maintained by Rico Sta. Cruz with help from contributors (list).

ricostacruz.com  ·  GitHub @rstacruz  ·  Twitter @rstacruz