Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
react-structured-data
Advanced tools
Readme
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,689 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
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.