{"id":18488391,"url":"https://github.com/google/react-schemaorg","last_synced_at":"2025-04-08T21:30:30.398Z","repository":{"id":37663488,"uuid":"169310780","full_name":"google/react-schemaorg","owner":"google","description":"Type-checked Schema.org JSON-LD for React","archived":false,"fork":false,"pushed_at":"2024-06-18T11:42:59.000Z","size":593,"stargazers_count":497,"open_issues_count":13,"forks_count":19,"subscribers_count":4,"default_branch":"main","last_synced_at":"2025-04-08T20:07:44.511Z","etag":null,"topics":["json-ld","jsonld","react","schema-org","schemaorg","semantic-web","typescript"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/google.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-02-05T20:50:35.000Z","updated_at":"2025-04-07T20:46:59.000Z","dependencies_parsed_at":"2024-06-18T12:41:52.206Z","dependency_job_id":null,"html_url":"https://github.com/google/react-schemaorg","commit_stats":{"total_commits":59,"total_committers":6,"mean_commits":9.833333333333334,"dds":0.3389830508474576,"last_synced_commit":"dac2d83725b210c13a0dff54e9b2271765141837"},"previous_names":[],"tags_count":10,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/google%2Freact-schemaorg","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/google%2Freact-schemaorg/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/google%2Freact-schemaorg/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/google%2Freact-schemaorg/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/google","download_url":"https://codeload.github.com/google/react-schemaorg/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247930966,"owners_count":21020142,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["json-ld","jsonld","react","schema-org","schemaorg","semantic-web","typescript"],"created_at":"2024-11-06T12:51:40.300Z","updated_at":"2025-04-08T21:30:30.392Z","avatar_url":"https://github.com/google.png","language":"TypeScript","funding_links":[],"categories":["Open-Source Repos \u0026 Tools","TypeScript"],"sub_categories":["Structured Data \u0026 Schema"],"readme":"[![react-schemaorg npm version](https://badge.fury.io/js/react-schemaorg.svg)](https://www.npmjs.com/package/react-schemaorg) [![Node.js CI](https://github.com/google/react-schemaorg/actions/workflows/ci.yml/badge.svg)](https://github.com/google/react-schemaorg/actions/workflows/ci.yml) [![Coverage Status](https://coveralls.io/repos/github/google/react-schemaorg/badge.svg?branch=master)](https://coveralls.io/github/google/react-schemaorg?branch=master)\n\n# react-schemaorg\n\nEasily insert valid Schema.org JSON-LD in your React apps.\n\nThis library provides `\u003cJsonLd\u003e` for plain React apps, and `helmetJsonLdProp()`\nfor use with [`\u003cHelmet\u003e`](https://github.com/nfl/react-helmet).\n\nUses [schema-dts](https://github.com/google/schema-dts) for Schema.org\nTypeScript definitions.\n\nNote: This is not an officially supported Google product.\n\n## Usage\n\nInstall [`react-schemaorg`](https://www.npmjs.com/package/react-schemaorg) and\nyour desired version of\n[`schema-dts`](https://www.npmjs.com/package/schema-dts):\n\n```sh\nnpm install schema-dts\nnpm install react-schemaorg\n```\n\n### Plain React Usage\n\nTo insert a simple JSON-LD snippet:\n\n```tsx\nimport { Person } from \"schema-dts\";\nimport { JsonLd } from \"react-schemaorg\";\n\nexport function GraceHopper() {\n  return (\n    \u003cJsonLd\u003cPerson\u003e\n      item={{\n        \"@context\": \"https://schema.org\",\n        \"@type\": \"Person\",\n        name: \"Grace Hopper\",\n        alternateName: \"Grace Brewster Murray Hopper\",\n        alumniOf: {\n          \"@type\": \"CollegeOrUniversity\",\n          name: [\"Yale University\", \"Vassar College\"],\n        },\n        knowsAbout: [\"Compilers\", \"Computer Science\"],\n      }}\n    /\u003e\n  );\n}\n```\n\n### Directly creating `\u003cscript\u003e` tags (for `next/head` and elsewhere)\n\nCertain `\u003chead\u003e` management libraries require `\u003cscript\u003e` tags to be directly\nincluded, rather than wrapped in a component. This includes NextJS's\n`next/head`, and `react-helmet`. With these, we can use the `jsonLdScriptProps`\nexport to do the same thing:\n\n```tsx\nimport { Person } from \"schema-dts\";\nimport { jsonLdScriptProps } from \"react-schemaorg\";\nimport Head from \"next/head\";\n\nexport default function MyPage() {\n  return (\n    \u003cHead\u003e\n      \u003cscript\n        {...jsonLdScriptProps\u003cPerson\u003e({\n          \"@context\": \"https://schema.org\",\n          \"@type\": \"Person\",\n          name: \"Grace Hopper\",\n          alternateName: \"Grace Brewster Murray Hopper\",\n          alumniOf: {\n            \"@type\": \"CollegeOrUniversity\",\n            name: [\"Yale University\", \"Vassar College\"],\n          },\n          knowsAbout: [\"Compilers\", \"Computer Science\"],\n        })}\n      /\u003e\n    \u003c/Head\u003e\n  );\n}\n```\n\n### [React Helmet](https://github.com/nfl/react-helmet) Usage\n\nTo set JSON-LD in React Helmet, you need to pass it to the `script={[...]}` prop\narray in the `Helmet` component:\n\n```tsx\nimport { Person } from \"schema-dts\";\nimport { helmetJsonLdProp } from \"react-schemaorg\";\nimport { Helmet } from \"react-helmet\";\n\n\u003cHelmet\n  script={[\n    helmetJsonLdProp\u003cPerson\u003e({\n      \"@context\": \"https://schema.org\",\n      \"@type\": \"Person\",\n      name: \"Grace Hopper\",\n      alternateName: \"Grace Brewster Murray Hopper\",\n      alumniOf: {\n        \"@type\": \"CollegeOrUniversity\",\n        name: [\"Yale University\", \"Vassar College\"],\n      },\n      knowsAbout: [\"Compilers\", \"Computer Science\"],\n    }),\n  ]}\n/\u003e;\n```\n\n## Developers\n\nUse NPM to install dependencies:\n\n```sh\nnpm install\n```\n\nUse tsc to build:\n\n```sh\ntsc\n```\n\nTo contribute changes, see [the CONTRIBUTING.md file](./CONTRIBUTING.md).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgoogle%2Freact-schemaorg","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgoogle%2Freact-schemaorg","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgoogle%2Freact-schemaorg/lists"}