rstacruz / react-meta-elements

Sets document title and meta tags using React elements or hooks

react-meta-elements

Sets document title and meta tags using React elements or hooks. A lightweight alternative to React Helmet. **No server-side rendering (SSR) support (yet!).**

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, Link } from 'react-meta-elements'

const MyComponent = () => {
  return (
    <>
      <Title>Hello world!</Title>
      <Meta name='description' content='This is a description' />
      <Link rel='canonical' href='https://github.com/' />
    </>
  )
}

More examples

<!-- Title -->
<Title>title here</Title>
<Title title="title here" />

<!-- Meta -->
<Meta name="description" content="This is a description" />
<Meta property="og:description" content="This is a description" />

<!-- Link -->
<Link rel="canonical" content="https://google.com/" />

React hooks API

Hook versions are available via useTitle, useMeta and useLink.

import { useTitle, useMeta } from 'react-meta-elements'

const MyComponent = () => {
  useTitle('My title here')
  useMeta({ name: 'description', content: 'My description' })

  return <span>...</span>
}

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' meta={[ { name: 'description', content: 'This is a description' } ]} /> Alternate syntax: <Helmet> <title>title here</title> <meta name='description' content='This is a description' /> </Helmet>	<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