@joaoalpalhao/react-json-ld v1.0.0

react-json-ld

Build your JSON-LD in a markup style.

Installation

To get started, install @joaoalpalhao/react-json-ld using the commands bellow:

npm i @joaoalpalhao/react-json-ld # or yarn add @joaoalpalhao/react-json-ld

Usage

The demo bellow shows how to use all the components.

import JsonLd, {
  JsonLdItem,
  JsonLdCollection,
  JsonLdObject,
  JsonLdArray,
  JsonLdElement
} from "@joaoalpalhao/react-json-ld";

export function GraceHopper() {
  return (
    <JsonLd context="https://schema.org/" indentation={2}>
      <JsonLdItem jsonKey="@type" jsonValue="Person" />
      <JsonLdItem jsonKey="name" jsonValue="Grace Hopper" />
      <JsonLdItem jsonKey="alternateName" jsonValue="Grace Brewster Murray Hopper" />
      <JsonLdCollection jsonKey="alumniOf">
        <JsonLdObject>
          <JsonLdItem jsonKey="@type" jsonValue="CollegeOrUniversity" />
          <JsonLdCollection jsonKey="name">
            <JsonLdArray>
              <JsonLdElement jsonValue="Yale University" />
              <JsonLdElement jsonValue="Vassar College" />
            </JsonLdArray>
          </JsonLdCollection>
        </JsonLdObject>
      </JsonLdCollection>
      <JsonLdCollection jsonKey="knowsAbout">
        <JsonLdArray>
          <JsonLdElement jsonValue="Compilers" />
          <JsonLdElement jsonValue="Computer Science" />
        </JsonLdArray>
      </JsonLdCollection>
    </JsonLd>
  );
}

This will output:

<script type="application/ld+json">
  {
    "@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"
    ]
  }
</script>

You can use map functions to create more complex schemas and update them as you need.

Made with ❤️ by @joao_alpalhao