Package Exports

react-breadcrumbs-jsonld
react-breadcrumbs-jsonld/dist/cjs/index.js
react-breadcrumbs-jsonld/dist/esm/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-breadcrumbs-jsonld) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

react-breadcrumbs-jsonld

Overview

Dynamically generates JSON-LD structured for breadcrumbs in React.

Installation

You can install this library using npm:

npm install react-breadcrumbs-jsonld

Usage

url must be an absolute path.
- Must begin with either http or https.
URLs must be recursively nested.

Example

import { BreadcrumbSchema, BreadcrumbItem } from "react-breadcrumbs-jsonld";

function App() {
  const breadcrumbs: BreadcrumbItem[] = [
    { url: "https://example.com/", name: "Home" },
    { url: "https://example.com/product/", name: "Products" },
    { url: "https://example.com/product/hoge", name: "Hoge" },
  ];

  return (
    <>
      <BreadcrumbSchema breadcrumbs={breadcrumbs} />
    </>
  );
}

Output

<script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "BreadcrumbList",
    "itemListElement": [
      {
        "@type": "ListItem",
        "position": 1,
        "item": {
          "@id": "https://example.com/",
          "name": "Home"
        }
      },
      {
        "@type": "ListItem",
        "position": 2,
        "item": {
          "@id": "https://example.com/product/",
          "name": "Products"
        }
      },
      {
        "@type": "ListItem",
        "position": 3,
        "item": {
          "@id": "https://example.com/product/hoge",
          "name": "Hoge"
        }
      }
    ]
  }
</script>

Schema.org Test Result

Link

License

This project is licensed under the MIT License - see the LICENSE file for details.