react-schemaorg: Strongly-typed Schema.org JSON-LD for React

I made this library (and the related, lower level schema-dts) after I was working inserting JSON-LD in a site and noticing a lack of TypeScript-y, developer-friendly way to do it. Most of the tooling to validate Schema.org JSON-LD is to use these online "validators", but that breaks (or lengthens) the development write-build-test loop.

google / react-schemaorg

Type-checked Schema.org JSON-LD for React

react-schemaorg

Easily insert valid Schema.org JSON-LD in your React apps.

This library provides <JsonLd> for plain React apps, and helmetJsonLdProp() for use with <Helmet>.

Uses schema-dts for Schema.org TypeScript definitions.

Note: This is not an officially supported Google product.

Usage

Install react-schemaorg and your desired version of schema-dts:

npm install schema-dts
npm install react-schemaorg

Plain React Usage

To insert a simple JSON-LD snippet:

import { Person } from "schema-dts";
import { JsonLd } from "react-schemaorg";
export function GraceHopper() {
  return (
    <JsonLd<Person>
      item={{
        "@context": "https://schema.org",
        "@type": "Person",
        name: "Grace Hopper",
        alternateName: "Grace Brewster Murray Hopper",
        alumniOf: {
          "@type": "CollegeOrUniversity",
          name: ["Yale University", "Vassar College"],
        },
        knowsAbout: ["Compilers", "Computer Science"],
      }}
    />
  );

…

View on GitHub

This library allows you to insert JSON-LD that is type-checked and offers completions, etc., just by taking advantage of TypeScript's type system. react-schemaorg is a simple wrapper around schema-dts, that inserts <script type="application/ld+json"> tags and requires you to specify a top-level "@context".