
Security News
PyPI Now Supports iOS and Android Wheels for Mobile Python Development
PyPI now supports iOS and Android wheels, making it easier for Python developers to distribute mobile packages.
react-structured-data
Advanced tools
React 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/.
yarn add react-structured-data
npm install react-structured-data --save
The following JSX:
<JSONLD>
<Product name="Product Name">
<AggregateRating ratingValue={4.3} reviewCount={197}/>
<GenericCollection type="review">
<Review name="It's awesome" reviewBody="This is Great! My family loves it" datePublished="11/22/1963">
<Author name="Jerry"/>
<Location name="Chicago, IL"/>
<Rating ratingValue={5} />
</Review>
<Review name="Very cool" reviewBody="I like this a lot. Very cool product" datePublished="11/22/1963">
<Author name="Cool Carl"/>
<Location name="Chicago, IL"/>
<Rating ratingValue={4} />
</Review>
</GenericCollection>
</Product>
</JSONLD>
will add the following to your markup (will be minified):
<script type="application/ld+json">
{
"@context":"https://schema.org/",
"@type":"Product",
"name":"Product Name",
"aggregateRating": {
"@type":"AggregateRating",
"ratingValue":4.3,
"reviewCount":197
},
"review":[
{
"@type":"Review",
"datePublished":"11/22/1963",
"reviewBody":"This is Great! My family loves it",
"name":"It's awesome",
"author": {
"@type":"Person",
"name":"Jerry"
},
"locationCreated": {
"@type":"AdministrativeArea",
"name":"Chicago, IL"
},
"reviewRating": {
"@type": "Rating",
"ratingValue": 5
}
},
{
"@type":"Review",
"datePublished":"11/22/1963",
"reviewBody":"I like this a lot. Very cool product",
"name":"Very cool",
"author":{
"@type":"Person",
"name":"Cool Carl"
},
"locationCreated": {
"@type":"AdministrativeArea",
"name":"Chicago, IL"
},
"reviewRating": {
"@type": "Rating",
"ratingValue": 4
}
}
]
}
</script>
PropType | Value | Description |
---|---|---|
type | String | The @type description in the json-ld body: "@type": "Product" |
jsonldtype | String | The value of the @type description in the json-ld body: "@type": "Product" |
schema | Object (json) | This should be the schema that you want for your structured data node: {name: "It is awesome", reviewBody: "This is great!"} |
PropType | Value | Description |
---|---|---|
dangerouslyExposeHtml | Boolean | Set this to render the json within script tag using dangerouslySetInnerHTML |
PropType | Value | Description |
---|---|---|
parentID | String | Sets the id of the schema that becomes a reference that the children point to "@id": "product-x" |
id | String | similar to parentID but uses the ID on itself |
There are several preset schema components that can be used
If you would like to use a component that is not listed, simply use the Generic component and add the prop jsonldtype. Generic and GenericCollection allow you to add your own structured data type.
For example, If Review preset didn't exist, you could write:
<JSONLD>
<Generic type="review" jsonldtype="Review" schema={{name: "It is awesome", reviewBody: "This is great!"}}>
<Generic type="itemReviewed" jsonldtype="Product" schema={{"@id":"product-x"}} />
<Generic type="author" jsonldtype="Person" schema={{name: "Cool Carl"}}/>
<Generic type="locationCreated" jsonldtype="AdministrativeArea" schema={{name: "Chicago, IL"}}/>
</Generic>
</JSONLD>
This will output (minified):
<script type="application/ld+json">
{
"@context": "http://schema.org/",
"@type": "Review",
"name": "It is awesome",
"reviewBody": "This is great!",
"itemReviewed": {
"@type": "Product",
"@id": "product-x"
},
"author": {
"@type": "Person",
"name": "Cool Carl"
},
"locationCreated": {
"@type": "AdministrativeArea",
"name": "Chicago, IL"
}
}
</script>
This may seem not as ideal as using the presets, but this allows completely customizable structured data. There will also be more preset components to come in future releases to make implementation easier so stay tuned!
For more information on Structured data, visit https://developers.google.com/search/docs/guides/intro-structured-data, and also http://schema.org/. You can also validate the structured data here: https://search.google.com/structured-data/testing-tool.
TBA
MIT License
FAQs
Declarative JSON-LD Structured Data for ReactJS Apps
The npm package react-structured-data receives a total of 4,403 weekly downloads. As such, react-structured-data popularity was classified as popular.
We found that react-structured-data demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
PyPI now supports iOS and Android wheels, making it easier for Python developers to distribute mobile packages.
Security News
Create React App is officially deprecated due to React 19 issues and lack of maintenance—developers should switch to Vite or other modern alternatives.
Security News
Oracle seeks to dismiss fraud claims in the JavaScript trademark dispute, delaying the case and avoiding questions about its right to the name.