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"],
      }}
    />
  );
}

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:

import { Person } from "schema-dts";
import { jsonLdScriptProps } 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 Usage

To set JSON-LD in React Helmet, you need to pass it to the script={[...]} prop array in the Helmet component:

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:

npm install

Use tsc to build:

tsc

To contribute changes, see the CONTRIBUTING.md file.

Project Name	Stars	Repos Using This	Packages Using This	Most Recent Commit	Total Releases	Latest Release	Open Issues	License	Language
30 Days Of Javascript	38,544			2 days ago	1	January 19, 2022	326		JavaScript
30 days of JavaScript programming challenge is a step-by-step guide to learn JavaScript programming language in 30 days. This challenge may take more than 100 days, please just follow your own pace. These videos may help too: https://www.youtube.com/channel/UC7PNRuno1rzYPb1xLa4yktw
Sheetjs	33,584	4,379	3,816	2 months ago	170	March 24, 2022	129	apache-2.0	JavaScript
📗 SheetJS Spreadsheet Data Toolkit -- New home https://git.sheetjs.com/SheetJS/sheetjs
Jsoncrack.com	25,657			a day ago			41	gpl-3.0	TypeScript
✨ Innovative and open-source visualization application that transforms various data formats, such as JSON, YAML, XML, CSV and more, into interactive graphs.
Normalizr	20,987	3,388	633	2 years ago	43	March 19, 2022	22	mit	JavaScript
Normalizes nested JSON according to a schema
React Jsonschema Form	13,047	566	299	a day ago	103	December 16, 2019	272	apache-2.0	TypeScript
A React component for building Web forms from JSON Schema.
Jsonhero Web	8,074			a day ago			58	apache-2.0	TypeScript
JSON Hero is an open-source, beautiful JSON explorer for the web that lets you browse, search and navigate your JSON files at speed. 🚀. Built with 💜 by the Trigger.dev team.
Api Platform	8,044			2 days ago	37	February 12, 2018	579	mit	TypeScript
Create REST and GraphQL APIs, scaffold Jamstack webapps, stream changes in real-time.
Tabulator	5,690	31	71	7 days ago	85	July 23, 2023	131	mit	JavaScript
Interactive Tables and Data Grids for JavaScript
Survey Library	3,734	37	19	9 hours ago	436	August 08, 2023	541	mit	TypeScript
Free JavaScript form builder library with integration for React, Angular, Vue, jQuery, and Knockout.
React Docgen	3,454	8,230	1,744	11 hours ago	87	August 14, 2023	79	mit	TypeScript
A CLI and library to extract information from React component files for documentation generation purposes.

React Schemaorg