Support for Helmet script props.

README.md

@@ -2,8 +2,10 @@
 
 # react-schemaorg
 
-Easily insert valid Schema.org JSON-LD using the custom `<JsonLd>` react
-component.
+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>`](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";
+
+ <Helmet script={[
+     helmetJsonLdProp<Person>({
+         "@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:

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",

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
  * <JsonLd<Person>
  *   item={{
@@ -38,10 +44,8 @@ import { Thing, WithContext } from "schema-dts";
  * />
  * ```
  */
-export class JsonLd<T extends Thing> extends React.Component<{
+export class JsonLd<T extends Thing> extends React.Component<JsonLdOptions & {
   item: WithContext<T>;
-  /** 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<T extends Thing> extends React.Component<{
   }
 }
 
+/**
+ * Produces a Helmet-style <script> prop for a given JSON-LD datum.
+ *
+ * For example:
+ *
+ * ```tsx
+ * <Helmet script={[
+ *     helmetJsonLdProp<Person>({
+ *         "@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"]
+ *     }),
+ * ]} />
+ * ```
+ */
+export const helmetJsonLdProp = <T extends Thing>(item: WithContext<T>, options: JsonLdOptions = {}) => ({
+  type: "application/ld+json" as const,
+  innerHTML: JSON.stringify(item, safeJsonLdReplacer, options.space),
+});
+
 type JsonValueScalar = string | boolean | number;
 type JsonValue =
   | JsonValueScalar