Support using <script> tags directly.

Eyas · Eyas · commit 4a497ecf0d07 · 2020-07-20T14:32:35.000-04:00
Fixes #23. Some tools such as `next/head` rely on a script tag existing directly under the `<Head>` component. Allowing a react-schemaorg user just pass the props opaquely to a `<script>` tag gives us both encapsulation while getting the library to work. Our public API surface area is now effectivley 3 pieces: the original JSON-LD component, a function generating Helmet-style props, and this function, which generates plain JSX-style props for `<script>`.
diff --git a/README.md b/README.md
@@ -50,6 +50,39 @@ export function GraceHopper() {
 }
 ```
 
+### Directly creating `<script>` tags (for `next/head` and elsewhere)
+
+Certain `<head>` management libraries require `<script>` tags to be directly
+included, rather than wrapped in a component. This includes NextJS's
+`next/head`, and `react-helmet`. With these, we can use the `jsonLdScriptProps`
+export to do the same thing:
+
+```tsx
+import { Person } from "schema-dts";
+import { helmetJsonLdProp } from "react-schemaorg";
+import Head from "next/head";
+
+export default function MyPage() {
+  return (
+    <Head>
+      <script
+        {...jsonLdScriptProps<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"],
+        })}
+      />
+    </Head>
+  );
+}
+```
+
 ### [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
diff --git a/src/index.ts b/src/index.ts
@@ -14,4 +14,4 @@
  * limitations under the License.
  */
 
-export { helmetJsonLdProp, JsonLd } from "./json-ld";
+export { helmetJsonLdProp, JsonLd, jsonLdScriptProps } from "./json-ld";
diff --git a/src/json-ld.tsx b/src/json-ld.tsx
@@ -50,21 +50,41 @@ export class JsonLd<T extends Thing> extends React.Component<
   }
 > {
   render() {
-    return (
-      <script
-        type="application/ld+json"
-        dangerouslySetInnerHTML={{
-          __html: JSON.stringify(
-            this.props.item,
-            safeJsonLdReplacer,
-            this.props.space
-          ),
-        }}
-      />
-    );
+    return <script {...jsonLdScriptProps<T>(this.props.item, this.props)} />;
   }
 }
 
+/**
+ * Produces necessary props for a JSX <script> tag that includes JSON-LD.
+ *
+ * Can be used by spreading the props into a <script> JSX tag:
+ *
+ * ```tsx
+ * <script {...jsonLdScriptProps<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 function jsonLdScriptProps<T extends Thing>(
+  item: WithContext<T>,
+  options: JsonLdOptions = {}
+): JSX.IntrinsicElements["script"] {
+  return {
+    type: "application/ld+json",
+    dangerouslySetInnerHTML: {
+      __html: JSON.stringify(item, safeJsonLdReplacer, options.space),
+    },
+  };
+}
+
 /**
  * Produces a Helmet-style <script> prop for a given JSON-LD datum.
  *
