{"id":13941803,"url":"https://github.com/bentaylor2/react-structured-data","last_synced_at":"2025-04-06T19:14:09.039Z","repository":{"id":57345843,"uuid":"114171301","full_name":"bentaylor2/react-structured-data","owner":"bentaylor2","description":"React Structured Data provides an easy way to add structured data to your React apps","archived":false,"fork":false,"pushed_at":"2019-12-01T18:11:04.000Z","size":459,"stargazers_count":139,"open_issues_count":12,"forks_count":26,"subscribers_count":5,"default_branch":"master","last_synced_at":"2024-04-20T00:23:24.884Z","etag":null,"topics":["javascript","json-ld","jsonld","jsx","react","react-apps","react-component","react-components","react-structured-data","reactjs","schema","schema-org","seo","seotools","structured-data"],"latest_commit_sha":null,"homepage":"https://bentaylor2.github.io/react-structured-data/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/bentaylor2.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-12-13T21:34:59.000Z","updated_at":"2024-01-09T13:10:31.000Z","dependencies_parsed_at":"2022-09-17T22:13:32.101Z","dependency_job_id":null,"html_url":"https://github.com/bentaylor2/react-structured-data","commit_stats":null,"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bentaylor2%2Freact-structured-data","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bentaylor2%2Freact-structured-data/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bentaylor2%2Freact-structured-data/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bentaylor2%2Freact-structured-data/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bentaylor2","download_url":"https://codeload.github.com/bentaylor2/react-structured-data/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247535521,"owners_count":20954576,"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":["javascript","json-ld","jsonld","jsx","react","react-apps","react-component","react-components","react-structured-data","reactjs","schema","schema-org","seo","seotools","structured-data"],"created_at":"2024-08-08T02:01:29.557Z","updated_at":"2025-04-06T19:14:09.013Z","avatar_url":"https://github.com/bentaylor2.png","language":"JavaScript","readme":"# React Structured Data\n\nReact Structured Data provides an easy way to add structured data to your React apps. Structured data is a standardized format for providing information about a page and classifying the page content. This library follows guidelines specified at http://schema.org/.\n\n## Installation\n\n### Yarn\n\n`yarn add react-structured-data`\n\n### NPM\n\n`npm install react-structured-data --save`\n\n## Code Example\n\nThe following JSX:\n\n```jsx\n  \u003cJSONLD\u003e\n    \u003cProduct name=\"Product Name\"\u003e\n      \u003cAggregateRating ratingValue={4.3} reviewCount={197}/\u003e\n      \u003cGenericCollection type=\"review\"\u003e\n        \u003cReview name=\"It's awesome\" reviewBody=\"This is Great! My family loves it\" datePublished=\"11/22/1963\"\u003e\n          \u003cAuthor name=\"Jerry\"/\u003e\n          \u003cLocation name=\"Chicago, IL\"/\u003e\n          \u003cRating ratingValue={5} /\u003e\n        \u003c/Review\u003e\n        \u003cReview name=\"Very cool\" reviewBody=\"I like this a lot. Very cool product\" datePublished=\"11/22/1963\"\u003e\n          \u003cAuthor name=\"Cool Carl\"/\u003e\n          \u003cLocation name=\"Chicago, IL\"/\u003e\n          \u003cRating ratingValue={4} /\u003e\n        \u003c/Review\u003e\n      \u003c/GenericCollection\u003e\n    \u003c/Product\u003e\n  \u003c/JSONLD\u003e\n```\n\nwill add the following to your markup (will be minified):\n\n```html\n\u003cscript type=\"application/ld+json\"\u003e\n  {\n    \"@context\":\"https://schema.org/\",\n    \"@type\":\"Product\",\n    \"name\":\"Product Name\",\n    \"aggregateRating\": {\n      \"@type\":\"AggregateRating\",\n      \"ratingValue\":4.3,\n      \"reviewCount\":197\n    },\n    \"review\":[\n      {\n        \"@type\":\"Review\",\n        \"datePublished\":\"11/22/1963\",\n        \"reviewBody\":\"This is Great! My family loves it\",\n        \"name\":\"It's awesome\",\n        \"author\": {\n          \"@type\":\"Person\",\n          \"name\":\"Jerry\"\n        },\n        \"locationCreated\": {\n          \"@type\":\"AdministrativeArea\",\n          \"name\":\"Chicago, IL\"\n        },\n        \"reviewRating\": {\n          \"@type\": \"Rating\",\n          \"ratingValue\": 5\n        }\n      },\n      {\n        \"@type\":\"Review\",\n        \"datePublished\":\"11/22/1963\",\n        \"reviewBody\":\"I like this a lot. Very cool product\",\n        \"name\":\"Very cool\",\n        \"author\":{\n          \"@type\":\"Person\",\n          \"name\":\"Cool Carl\"\n        },\n        \"locationCreated\": {\n          \"@type\":\"AdministrativeArea\",\n          \"name\":\"Chicago, IL\"\n        },\n        \"reviewRating\": {\n          \"@type\": \"Rating\",\n          \"ratingValue\": 4\n        }\n      }\n    ]\n  }\n\u003c/script\u003e\n```\n\n## Reference\n\n### PropTypes\n\n#### Generic Component PropTypes\n\n\n| PropType      | Value         | Description  |\n| ------------- | ------------- | ------       |\n| type          | String        | The @type description in the json-ld body: `\"@type\": \"Product\"` |\n| jsonldtype    | String        | The value of the @type description in the json-ld body: `\"@type\": \"Product\"`  |\n| schema        | Object (json) | This should be the schema that you want for your structured data node: `{name: \"It is awesome\", reviewBody: \"This is great!\"}`  |\n\n\n#### JSONLD node propTypes\n\n\n| PropType              | Value       | Description  |\n| -------------         | ----------- | ------       |\n| dangerouslyExposeHtml | Boolean     | Set this to render the json within script tag using `dangerouslySetInnerHTML` |\n\n\n#### Schema node PropTypes\n\n\n| PropType      | Value         | Description  |\n| ------------- | ------------- | ------       |\n| parentID      | String        | Sets the id of the schema that becomes a reference that the children point to `\"@id\": \"product-x\"` |\n| id            | String        | similar to parentID but uses the ID on itself |\n\n\n### Preset Components\nThere are several preset schema components that can be used\n\n- AggregateRating\n- Answer\n- Author\n- ItemReviewed\n- Location\n- Product\n- Question\n- Rating\n- Review\n\nIf you would like to use a component that is not listed, simply use the Generic component and add the prop jsonldtype.\nGeneric and GenericCollection allow you to add your own structured data type.\n\nFor example, If Review preset didn't exist, you could write:\n\n```jsx\n\u003cJSONLD\u003e\n  \u003cGeneric type=\"review\" jsonldtype=\"Review\" schema={{name: \"It is awesome\", reviewBody: \"This is great!\"}}\u003e\n    \u003cGeneric type=\"itemReviewed\" jsonldtype=\"Product\" schema={{\"@id\":\"product-x\"}} /\u003e\n    \u003cGeneric type=\"author\" jsonldtype=\"Person\" schema={{name: \"Cool Carl\"}}/\u003e\n    \u003cGeneric type=\"locationCreated\" jsonldtype=\"AdministrativeArea\" schema={{name: \"Chicago, IL\"}}/\u003e\n  \u003c/Generic\u003e\n\u003c/JSONLD\u003e\n```\n\nThis will output (minified):\n\n```html\n\u003cscript type=\"application/ld+json\"\u003e\n  {\n    \"@context\": \"http://schema.org/\",\n    \"@type\": \"Review\",\n    \"name\": \"It is awesome\",\n    \"reviewBody\": \"This is great!\",\n    \"itemReviewed\": {\n      \"@type\": \"Product\",\n      \"@id\": \"product-x\"\n    },\n    \"author\": {\n      \"@type\": \"Person\",\n      \"name\": \"Cool Carl\"\n    },\n    \"locationCreated\": {\n      \"@type\": \"AdministrativeArea\",\n      \"name\": \"Chicago, IL\"\n    }\n  }\n\u003c/script\u003e\n```\n\nThis may seem not as ideal as using the presets, but this allows completely customizable structured data.\nThere will also be more preset components to come in future releases to make implementation easier so stay tuned!\n\n### Structured Data and Schema.org\n\nFor more information on Structured data, visit https://developers.google.com/search/docs/guides/intro-structured-data, and also http://schema.org/.\nYou can also validate the structured data here: https://search.google.com/structured-data/testing-tool.\n\n## Contributors\n\nTBA\n\n## License\n\nMIT License\n","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbentaylor2%2Freact-structured-data","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbentaylor2%2Freact-structured-data","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbentaylor2%2Freact-structured-data/lists"}