Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/bentaylor2/react-structured-data

React Structured Data provides an easy way to add structured data to your React apps
https://github.com/bentaylor2/react-structured-data

javascript json-ld jsonld jsx react react-apps react-component react-components react-structured-data reactjs schema schema-org seo seotools structured-data

Last synced: 5 days ago
JSON representation

React Structured Data provides an easy way to add structured data to your React apps

Host: GitHub
URL: https://github.com/bentaylor2/react-structured-data
Owner: bentaylor2
License: mit
Created: 2017-12-13T21:34:59.000Z (about 7 years ago)
Default Branch: master
Last Pushed: 2019-12-01T18:11:04.000Z (about 5 years ago)
Last Synced: 2024-04-20T00:23:24.884Z (9 months ago)
Topics: javascript, json-ld, jsonld, jsx, react, react-apps, react-component, react-components, react-structured-data, reactjs, schema, schema-org, seo, seotools, structured-data
Language: JavaScript
Homepage: https://bentaylor2.github.io/react-structured-data/
Size: 448 KB
Stars: 139
Watchers: 5
Forks: 26
Open Issues: 12
Metadata Files:
- Readme: README.md
- License: LICENSE

Awesome Lists containing this project

jimsghstars - bentaylor2/react-structured-data - React Structured Data provides an easy way to add structured data to your React apps (JavaScript)

README

# React Structured Data

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/.

## Installation

### Yarn

`yarn add react-structured-data`

### NPM

`npm install react-structured-data --save`

## Code Example

The following JSX:

```jsx

```

will add the following to your markup (will be minified):

```html

{
"@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
}
}
]
}

```

## Reference

### PropTypes

#### Generic Component PropTypes

| 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!"}` |

#### JSONLD node propTypes

| PropType | Value | Description |
| ------------- | ----------- | ------ |
| dangerouslyExposeHtml | Boolean | Set this to render the json within script tag using `dangerouslySetInnerHTML` |

#### Schema node PropTypes

| 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 |

### Preset Components
There are several preset schema components that can be used

- AggregateRating
- Answer
- Author
- ItemReviewed
- Location
- Product
- Question
- Rating
- Review

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:

```jsx

```

This will output (minified):

```html

{
"@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"
}
}

```

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!

### Structured Data and Schema.org

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.

## Contributors

TBA

## License

MIT License