Registry / serialization / react-schemaorg

react-schemaorg

library2.0.1jsnpmunverified

react-schemaorg is a library designed to simplify the integration of structured data into React applications using Schema.org JSON-LD. It leverages the `schema-dts` package for robust TypeScript definitions, ensuring strong type safety when defining rich snippets, which helps prevent common errors in structured data implementation. The current stable version is 2.0.1, with releases typically addressing dependency updates, minor feature enhancements like `@graph` key support, or improved compatibility with popular head management libraries such as Next.js `next/head` and `react-helmet`. Key differentiators include its strong emphasis on type-checking through `schema-dts`, the provision of both a declarative `<JsonLd>` component and utility functions (`jsonLdScriptProps`, `helmetJsonLdProp`) for flexible integration, and its focus on secure JSON-LD parsing to mitigate potential XSS vulnerabilities.

serialization web-framework

npm install react-schemaorg

github ↗package ↗

INSTALL

IMPORT

SIG · REACT-SCHEMAORG

react-schemaorg

serializationjavascriptv2.0.1

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

JsonLd

✓ import { JsonLd } from 'react-schemaorg';

✗ const JsonLd = require('react-schemaorg').JsonLd;

This is the primary React component for embedding JSON-LD directly into a React tree. Ensure named import for ESM setups.

jsonLdScriptProps

✓ import { jsonLdScriptProps } from 'react-schemaorg';

✗ import jsonLdScriptProps from 'react-schemaorg/jsonLdScriptProps';

A utility function returning script tag properties, ideal for use with `next/head` or other scenarios requiring direct `<script>` tag creation. It's a named export.

helmetJsonLdProp

✓ import { helmetJsonLdProp } from 'react-schemaorg';

✗ import { Helmet } from 'react-helmet'; const jsonLd = helmetJsonLdProp(...); // Incorrectly assuming it's part of react-helmet

This function generates a JSON-LD object specifically formatted for use within `react-helmet`'s `script` (or `scriptElements`) prop array.

Person (type)

✓ import type { Person } from 'schema-dts';

✗ import { Person } from 'schema-dts';

While not from `react-schemaorg` directly, types from `schema-dts` are fundamental for type-safe usage. Use `import type` to avoid bundling unnecessary runtime code.

This quickstart demonstrates how to embed Schema.org JSON-LD data into a React component using the `<JsonLd>` component from `react-schemaorg`. It defines a `Person` schema for 'Grace Hopper' with various properties, showcasing type-safe data structuring for search engines and other semantic web consumers, leveraging TypeScript definitions from `schema-dts`.

import { Person } from "schema-dts"; import { JsonLd } from "react-schemaorg"; import React from 'react'; // Install peer dependencies: // npm install schema-dts react-schemaorg react /** * A React component demonstrating the embedding of structured data * for Grace Hopper using Schema.org's Person type. */ export function GraceHopperJsonLd() { 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", "COBOL", "Debugging"], url: "https://en.wikipedia.org/wiki/Grace_Hopper", sameAs: [ "https://www.wikidata.org/wiki/Q11652", "https://viaf.org/viaf/100384877", "https://isni.org/isni/000000011856578X" ] }} /> ); } // Example of how to use the component within a larger React application const App = () => ( <div> <h1>Welcome to My Application</h1> <p>This page features an article about a notable figure.</p> {/* The JsonLd component will render a script tag in the document head */} <GraceHopperJsonLd /> <footer> <p>Structured data is included for SEO purposes.</p> </footer> </div> ); export default App;

Debug

Known issues

breakingVersion 2.0.0 increased the minimum required Node.js version to 12.0.0 and the minimum EcmaScript target to ES2019. Projects using older Node.js versions or build environments targeting older ES standards will encounter compatibility issues.

fix

Upgrade your Node.js environment to version 12.0.0 or higher. Ensure your project's build configuration (e.g., `tsconfig.json` `target`) is set to ES2019 or later.

affects: >=2.0.0

breakingA critical XSS vulnerability (Issue #9) was patched in v1.0.1. The fix involves HTML-escaping characters (`&`, `<`, `>`, `"`, `'`) within the JSON-LD payload to ensure compliance with the JSON-LD standard for script elements. While functionally a 'no-op', any downstream systems relying on unescaped characters in the JSON-LD within `<script>` tags might be affected.

fix

No code fix is generally required for `react-schemaorg` itself. However, ensure that any tools or services consuming the JSON-LD from your application are capable of correctly parsing HTML-escaped content within `<script type="application/ld+json">` tags.

affects: >=1.0.1

gotchaIn v1.0.2, the library's build target was changed from ES2015 to ES5. This was done to improve compatibility with older build toolchains that may not correctly handle ES2015 'class' syntax. While generally a positive change for broader compatibility, projects with highly optimized build processes specifically tailored for ES2015 output might observe minor behavioral changes or require adjustments.

fix

Review your project's build pipeline (e.g., Babel, Webpack configurations) if you experience unexpected behavior or build output differences. Most projects should benefit from this change without explicit modification.

affects: >=1.0.2

Errors

Common errors & fixes

Type '{ "@context": string; "@type": string; name: string; age: number; }' is not assignable to type 'Person'. Object literal may only specify known properties, and 'age' does not exist in type 'Person'.

The JSON-LD object being passed to the `item` prop does not strictly conform to the `schema-dts` TypeScript definition for the specified Schema.org type (e.g., `Person` type does not have an 'age' property, or it expects a different type).

fix

Consult the `schema-dts` type definitions or the official Schema.org documentation to ensure all properties and their types within your JSON-LD object precisely match the expected schema. Use only valid properties for the given `@type`.

ReferenceError: JsonLd is not defined

This error typically indicates that the `JsonLd` component was not correctly imported or your JavaScript environment does not properly support ES module syntax, leading to `JsonLd` being `undefined` at runtime.

fix

Verify that `import { JsonLd } from 'react-schemaorg';` is correctly used at the top of your file. Ensure your build system (e.g., Webpack, Rollup, Babel) is configured to handle ES module imports for React components.

Property 'script' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<Helmet> & Readonly<HelmetProps>'. Did you mean 'scriptElements'?

When using `react-helmet` (or forks like `react-helmet-async`), the prop for passing script elements might vary between versions. Older versions might use `script`, while newer ones or `react-helmet-async` often use `scriptElements`.

fix

Check the documentation for your specific `react-helmet` library version. If `script` is not working, try passing the `helmetJsonLdProp` output to the `scriptElements` prop: `<Helmet scriptElements={[helmetJsonLdProp(...)]} />`.

Upgrade

Version history

2.0.1latest on npm

Audit

Dependencies

reactrequiredCore React library required for component rendering.

schema-dtsrequiredProvides TypeScript definitions for Schema.org types, enabling type-safe JSON-LD creation.

typescriptrequiredRequired for type checking and compilation of the library itself and for type-safe usage in projects.

Agent activity

2 hits · last 30 days

node

Resources

githubhttps://github.com/google/react-schemaorg ↗

packagehttps://www.npmjs.com/package/react-schemaorg ↗