npmpackage.info

Gathering detailed insights and metrics for react-schemaorg

react-schemaorg - 2.0.0 | npmpackage.info

react-schemaorg

Type-checked Schema.org JSON-LD for React

2.0.0

505

Apache-2.0

TypeScript

4.1

Installations

npm install react-schemaorg

Developer Guide

BETA

Typescript

Yes

Module System

CommonJS

Min. Node Version

>=12.0.0

Node Version

12.21.0

NPM Version

7.15.1 Pull Requests

Open

5

Total

39

Closed

4

Merged

30

Issues

Open

8

Total

19

Closed

11

Releases

react-schemaorg v2.0.0

v2.0.0

Updated on Jul 19, 2021

v1.3.3

Updated on Jun 02, 2021

v1.3.2

Updated on Jun 02, 2021

react-schemaorg v1.3.1

v1.3.1

Updated on Jun 02, 2021

react-schemaorg v1.3.0

v1.3.0

Updated on Jun 02, 2021

react-schemaorg v1.2.0

v1.2.0

Updated on Jul 20, 2020

View All 10 releases

Languages

TypeScript

JavaScript

TypeScript (91.14%)

JavaScript (8.86%)

Developer

google

Download Statistics

Total Downloads

Last Day

Last Week

Last Month

Last Year

GitHub Statistics

Apache-2.0 License

505 Stars

90 Commits

19 Forks

4 Watchers

3 Branches

17 Contributors

Updated on Jul 02, 2025

Maintainers

View All 17 Contributors

Package Meta Information

Latest Version

2.0.0

Package Id

react-schemaorg@2.0.0

Size

7.30 kB

NPM Version

7.15.1

Node Version

12.21.0

Published on

Jul 19, 2021

Total Downloads

Cumulative downloads

Total Downloads

NaN

Last Day

NaN

Compared to previous day

Last Week

NaN

Compared to previous week

Last Month

NaN

Compared to previous month

Last Year

NaN

Compared to previous year

Weekly Downloads

Monthly Downloads

Yearly Downloads

Peer Dependencies

schema-dts typescript react

Dev Dependencies

@babel/plugin-transform-react-jsx @babel/preset-env @babel/preset-typescript @types/jest @types/react @types/react-test-renderer coveralls jest prettier react react-test-renderer schema-dts typescript

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:

1npm install schema-dts
2npm install react-schemaorg

Plain React Usage

To insert a simple JSON-LD snippet:

1import { Person } from "schema-dts";
2import { JsonLd } from "react-schemaorg";
3
4export function GraceHopper() {
5  return (
6    <JsonLd<Person>
7      item={{
8        "@context": "https://schema.org",
9        "@type": "Person",
10        name: "Grace Hopper",
11        alternateName: "Grace Brewster Murray Hopper",
12        alumniOf: {
13          "@type": "CollegeOrUniversity",
14          name: ["Yale University", "Vassar College"],
15        },
16        knowsAbout: ["Compilers", "Computer Science"],
17      }}
18    />
19  );
20}

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:

1import { Person } from "schema-dts";
2import { jsonLdScriptProps } from "react-schemaorg";
3import Head from "next/head";
4
5export default function MyPage() {
6  return (
7    <Head>
8      <script
9        {...jsonLdScriptProps<Person>({
10          "@context": "https://schema.org",
11          "@type": "Person",
12          name: "Grace Hopper",
13          alternateName: "Grace Brewster Murray Hopper",
14          alumniOf: {
15            "@type": "CollegeOrUniversity",
16            name: ["Yale University", "Vassar College"],
17          },
18          knowsAbout: ["Compilers", "Computer Science"],
19        })}
20      />
21    </Head>
22  );
23}

React Helmet Usage

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

1import { Person } from "schema-dts";
2import { helmetJsonLdProp } from "react-schemaorg";
3import { Helmet } from "react-helmet";
4
5<Helmet
6  script={[
7    helmetJsonLdProp<Person>({
8      "@context": "https://schema.org",
9      "@type": "Person",
10      name: "Grace Hopper",
11      alternateName: "Grace Brewster Murray Hopper",
12      alumniOf: {
13        "@type": "CollegeOrUniversity",
14        name: ["Yale University", "Vassar College"],
15      },
16      knowsAbout: ["Compilers", "Computer Science"],
17    }),
18  ]}
19/>;

Developers

Use NPM to install dependencies:

1npm install

Use tsc to build:

1tsc

To contribute changes, see the CONTRIBUTING.md file.

No vulnerabilities found.

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

10

Dangerous-Workflow

Determines if the project's GitHub Action workflows avoid dangerous patterns.

10

License

Determines if the project has defined a license.

10

Security-Policy

Determines if the project has published a security policy.

7

SAST

Determines if the project uses static code analysis.

3

Pinned-Dependencies

Determines if the project has declared and pinned the dependencies of its build process.

0

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

0

Maintained

Determines if the project is "actively maintained".

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Token-Permissions

Determines if the project's workflows follow the principle of least privilege.

0

Fuzzing

Determines if the project uses fuzzing.

0

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

Score

4.1

/10

Last Scanned on 2025-07-07

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.

Learn More

react-schemaorg

Installations

Developer Guide

Yes

CommonJS

>=12.0.0

12.21.0

7.15.1

Pull Requests

5

39

4

30

Issues

8

19

11

Releases

Languages

Developer

google

Download Statistics

GitHub Statistics

Maintainers

Package Meta Information

Total Downloads

NaN

Weekly Downloads

Monthly Downloads

Yearly Downloads

Peer Dependencies

Dev Dependencies

react-schemaorg

Usage

Plain React Usage

Directly creating <script> tags (for next/head and elsewhere)

React Helmet Usage

Developers

10

10

10

10

7

3

0

0

0

0

0

0

4.1

/10

Directly creating `<script>` tags (for `next/head` and elsewhere)