diff --git a/README.md b/README.md index 1a16188..29382ec 100644 --- a/README.md +++ b/README.md @@ -2,8 +2,10 @@ # react-schemaorg -Easily insert valid Schema.org JSON-LD using the custom `` react -component. +Easily insert valid Schema.org JSON-LD in your React apps. + +This library provides `` for plain React apps, and `helmetJsonLdProp()` +for use with [``](https://github.com/nfl/react-helmet). Uses [schema-dts](https://github.com/google/schema-dts) for Schema.org TypeScript definitions. @@ -21,7 +23,9 @@ npm install schema-dts npm install react-schemaorg ``` -Then, to insert a simple JSON-LD snippet: +### Plain React Usage + +To insert a simple JSON-LD snippet: ```ts import { Person } from "schema-dts"; @@ -43,6 +47,31 @@ export function GraceHopper() { } ``` +### [React Helmet](https://github.com/nfl/react-helmet) Usage + +To set JSON-LD in React Helmet, you need to pass it to the `script={[...]}` prop +array in the `Helmet` component: + + ```tsx +import { Person } from "schema-dts"; +import { helmetJsonLdProp } from "react-schemaorg"; +import { Helmet } from "react-helmet"; + + ({ + "@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"] + }), + ]} /> + ``` + ## Developers Use NPM to install dependencies: diff --git a/package.json b/package.json index f224842..004375f 100644 --- a/package.json +++ b/package.json @@ -34,7 +34,10 @@ "Semantic Web", "semantic-web", "Linked Data", - "linked-data" + "linked-data", + "react-helmet", + "helmet", + "script" ], "homepage": "https://github.com/google/react-schemaorg#readme", "bugs": "https://github.com/google/react-schemaorg/issues", diff --git a/src/json-ld.tsx b/src/json-ld.tsx index ef9a0fa..e31edcc 100644 --- a/src/json-ld.tsx +++ b/src/json-ld.tsx @@ -17,10 +17,16 @@ import * as React from "react"; import { Thing, WithContext } from "schema-dts"; +interface JsonLdOptions { + /** Adds indentation, white space, and line break characters to JSON-LD output. {@link JSON.stringify} */ + space?: string | number; +} + /** * Component that inline-includes a JSON-LD script where specified. * - * @example + * For Example: + * * ```tsx * * item={{ @@ -38,10 +44,8 @@ import { Thing, WithContext } from "schema-dts"; * /> * ``` */ -export class JsonLd extends React.Component<{ +export class JsonLd extends React.Component; - /** Adds indentation, white space, and line break characters to JSON-LD output. {@link JSON.stringify} */ - space?: string | number; }> { render() { return ( @@ -55,6 +59,32 @@ export class JsonLd extends React.Component<{ } } +/** + * Produces a Helmet-style