react-microdata
This repo provides 895 1 schema.org types as react wrappers for the microdata format. Wrappers are auto generated based on the latest schema.org jsonld schema.
Example
Product
Product schema taken from the google example.
HTML
<div>
<div itemtype="https://schema.org/Product" itemscope>
<meta itemprop="mpn" content="925872" />
<meta itemprop="name" content="Executive Anvil" />
<link itemprop="image" href="https://example.com/photos/16x9/photo.jpg" />
<link itemprop="image" href="https://example.com/photos/4x3/photo.jpg" />
<link itemprop="image" href="https://example.com/photos/1x1/photo.jpg" />
<meta itemprop="description" content="Sleeker than ACME's Classic Anvil, the Executive Anvil is perfect for the business traveler looking for something to drop from a height." />
<div itemprop="offers" itemtype="https://schema.org/Offer" itemscope>
<link itemprop="url" href="https://example.com/anvil" />
<meta itemprop="availability" content="https://schema.org/InStock" />
<meta itemprop="priceCurrency" content="USD" />
<meta itemprop="itemCondition" content="https://schema.org/UsedCondition" />
<meta itemprop="price" content="119.99" />
<meta itemprop="priceValidUntil" content="2020-11-20" />
</div>
<div itemprop="aggregateRating" itemtype="https://schema.org/AggregateRating" itemscope>
<meta itemprop="reviewCount" content="89" />
<meta itemprop="ratingValue" content="4.4" />
</div>
<div itemprop="review" itemtype="https://schema.org/Review" itemscope>
<div itemprop="author" itemtype="https://schema.org/Person" itemscope>
<meta itemprop="name" content="Fred Benson" />
</div>
<div itemprop="reviewRating" itemtype="https://schema.org/Rating" itemscope>
<meta itemprop="ratingValue" content="4" />
<meta itemprop="bestRating" content="5" />
</div>
</div>
<meta itemprop="sku" content="0446310786" />
<div itemprop="brand" itemtype="https://schema.org/Brand" itemscope>
<meta itemprop="name" content="ACME" />
</div>
</div>
</div>the equivalent translation to jsx is
JSX
import {
Product, // The type has the same name as the package.
Mpn, // Type props can be imported from the same package.
Name,
Image,
Description,
Offers,
Review,
Sku,
Brand,
} from "@react-microdata/product";
import {
Url,
Availability,
PriceCurrency,
ItemCondition,
Price,
PriceValidUntil,
AggregateRating,
} from "@react-microdata/offer";
import {
ReviewCount,
RatingValue,
BestRating,
} from "@react-microdata/aggregate-rating";
import {
Author,
Name as AuthorName,
ReviewRating,
} from "@react-microdata/review";
import { Name as BrandName } from "@react-microdata/brand";
const ProductComponent = () => {
return (
<Product>
{/*
The "as" props can be any HTML tag. If no tag is pased,
"div" is the default.
*/}
<Mpn as={"meta"} content="925872" />
<Name as={"meta"} content="Executive Anvil" />
{/*
Although the "image" property on the "Product" type
expects 2 types "URL" and "ImageObject", the itemprop="image" is still a
valid schema.
*/}
<Image as={"link"} href="https://example.com/photos/16x9/photo.jpg" />
<Image as={"link"} href="https://example.com/photos/4x3/photo.jpg" />
<Image as={"link"} href="https://example.com/photos/1x1/photo.jpg" />
<Description
as={"meta"}
content="Sleeker than ACME's Classic Anvil, the Executive Anvil is perfect for the business traveler looking for something to drop from a height."
/>
<Offers.Offer>
{/*
The property "offers" on the "Product" type has two expected types:
"Offer" as "Demand" and can be accesed as a static property though
the .(dot) syntax.
*/}
<Url as={"meta"} href="https://example.com/anvil" />
<Availability as={"meta"} content="https://schema.org/InStock" />
<PriceCurrency as={"meta"} content="USD" />
<ItemCondition as={"meta"} content="https://schema.org/UsedCondition" />
<Price as={"meta"} content="119.99" />
<PriceValidUntil as={"meta"} content="2020-11-20" />
</Offers.Offer>
<AggregateRating>
<ReviewCount as={"meta"} content="89" />
<RatingValue as={"meta"} content="4.4" />
</AggregateRating>
<Review>
<Author>
<AuthorName as={"meta"} content="Fred Benson" />
</Author>
<ReviewRating.Rating>
<RatingValue as={"meta"} content="4" />
<BestRating as={"meta"} content="5" />
</ReviewRating.Rating>
</Review>
<Sku as={"meta"} content="0446310786" />
<Brand>
<BrandName as={"meta"} content="ACME" />
</Brand>
</Product>
);
};Footnotes
-
"DownloadAction" and "DataDownload" are not available. NPM does not allow packages which have the word "download" in its name.
↩
