Use it for adding canonical links, metadata and OpenGraph information to your React projects!

If you are rendering client side (not using Gatsby, or Next.js static routes) then you can use react-snap to create your static HTML.

This is primarily targeted for use in Gatsby sites.

Install it from npm!

yarn add react-seo-component # peer dependency of react helmet yarn add react-helmet

If you are using it with Gatsby you will also need to install the Gatsby plugin:

yarn add react-seo-component yarn add react-helmet yarn add gatsby-plugin-react-helmet # or in one command yarn add react-seo-component react-helmet gatsby-plugin-react-helmet

This will create the meta tags at build time.

Examples:

For an index page:

<SEO title={title} titleTemplate={siteName} titleSeparator={`-`} description={description || 'nothin’'} image={image} pathname={siteUrl} siteLanguage={siteLanguage} siteLocale={siteLocale} twitterUsername={twitterUsername} />

For a blog post:

<SEO title={title} titleTemplate={siteName} titleSeparator={`-`} description={description} image={image} pathname={siteUrlPlusSlug} siteLanguage={siteLanguage} siteLocale={siteLocale} twitterUsername={twitterUsername} author={authorName} article={true} publishedDate={createdDate} modifiedDate={updatedDate} />

Use npm pack or yarn pack to create a .tgz of the project you can install locally on your project to test with.

# from here yarn pack # copy to project to test cp react-seo-component-2.0.1.tgz ../project-to-test-with/ # ~/project-to-test-with yarn add file:react-seo-component-2.0.1.tgz

• LekoArts for the initial components detailed in his Gatsby Prismic starter.

• Leigh Halliday for the primer video on using TSDX

• Jared Palmer for TSDX

https://medium.com/recraftrelic/building-a-react-component-as-a-npm-module-18308d4ccde9

https://github.com/recraftrelic/dummy-react-npm-module/blob/master/package.json