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)