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"], }} /> );…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".
Top comments (0)