react-structured-data/src/example/containers/Example.js at adf9412eaa0ac5b415d6b6b98e2033f3f883bbfa · bentaylor2/react-structured-data · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
import React, { PureComponent } from 'react';
import styles from './Example.scss';
import {
  JSONLD,
  AggregateRating,
  Graph,
  Product,
  ItemReviewed,
  GenericCollection,
  Review,
  Author,
  Location,
  Rating,
  Generic,
  Organization,
  PostalAddress
} from 'react-structured-data';

class Example extends PureComponent {
  render() {
    return (
      <section className={styles.example}>
        <header className={styles.header}>
          <h2>React Structured Data</h2>
        </header>
        <p>
          Each JSONLD component added creates a script tag with structured data on the page
        </p>
        <p className={styles.exampleIntro}>
        Below is generated JSON-LD
        </p>
        <section className={styles.exampleCode}>
          <JSONLD>
            <Graph>
              <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} />
                <ItemReviewed>
                  <Product
                    name="Product Name"
                    parentID="product-x" />
                </ItemReviewed>
              </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} />
                <ItemReviewed>
                  <Product
                    name="Product Name"
                    parentID="product-x" />
                </ItemReviewed>
              </Review>
            </Graph>
          </JSONLD>
          <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>
          <JSONLD>
            <Organization name="John Doe Company"
              url="https://www.johnDoeCompany.com"
              logo="https://www.johnDoeCompany.tv/wp-content/uploads/2017/08/logo.png">
              <PostalAddress addressCountry="HU"
                addressLocality="Budapest"
                addressRegion="Pest"
                postalCode="1063"
                streetAddress="Bajnok utca 13" />
            </Organization>
          </JSONLD>
        </section>
      </section>
    );
  }
}


export default Example;