Have ideas to improve npm?Join in the discussion! »

    react-schemaorg
    TypeScript icon, indicating that this package has built-in type declarations

    1.3.1 • Public • Published

    react-schemaorg npm version Build Status Coverage Status

    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.

    Install

    npm i react-schemaorg

    DownloadsWeekly Downloads

    18,339

    Version

    1.3.1

    License

    Apache-2.0

    Unpacked Size

    84.4 kB

    Total Files

    10

    Last publish

    Collaborators

    • avatar