All Projects → google → React Schemaorg

google / React Schemaorg

Licence: apache-2.0
Type-checked Schema.org JSON-LD for React

Programming Languages

typescript
32286 projects

Projects that are alternatives of or similar to React Schemaorg

Jsonld
JSON-LD processor for PHP
Stars: ✭ 280 (+6.87%)
Mutual labels:  schema-org, json-ld, semantic-web
Schema Dts
JSON-LD TypeScript types for Schema.org vocabulary
Stars: ✭ 338 (+29.01%)
Mutual labels:  schema-org, json-ld, semantic-web
WG3-MetadataSpecifications
WG3 Metadata Specification
Stars: ✭ 25 (-90.46%)
Mutual labels:  schema-org, json-ld
schema-dot-org
Validated structured data for websites
Stars: ✭ 42 (-83.97%)
Mutual labels:  schema-org, json-ld
jsonld-context-parser.js
Parses JSON-LD contexts
Stars: ✭ 20 (-92.37%)
Mutual labels:  semantic-web, json-ld
Json Silo
Contextual data silo for the IoT and Smart Spaces. We believe in an open Internet of Things.
Stars: ✭ 10 (-96.18%)
Mutual labels:  schema-org, json-ld
Structured Data Testing Tool
A library and command line tool to help inspect and test for Structured Data.
Stars: ✭ 34 (-87.02%)
Mutual labels:  schema-org, json-ld
php-schema.org-mapping
A fluent interface to create mappings using Schema.org for Microdata and JSON-LD.
Stars: ✭ 31 (-88.17%)
Mutual labels:  schema-org, json-ld
autocomplete-semantic-web
Semantic Web Autocomplete for Atom Editor
Stars: ✭ 45 (-82.82%)
Mutual labels:  semantic-web, schema-org
twinql
A graph query language for the semantic web
Stars: ✭ 17 (-93.51%)
Mutual labels:  semantic-web, json-ld
seomate
SEO, mate! It's important. That's why SEOMate provides the tools you need to craft all the meta tags, sitemaps and JSON-LD microdata you need - in one highly configurable, open and friendly package - with a super-light footprint.
Stars: ✭ 31 (-88.17%)
Mutual labels:  schema-org, json-ld
Schema Generator
PHP Model Scaffolding from Schema.org and other RDF vocabularies
Stars: ✭ 379 (+44.66%)
Mutual labels:  schema-org, json-ld
YALC
🕸 YALC: Yet Another LOD Cloud (registry of Linked Open Datasets).
Stars: ✭ 14 (-94.66%)
Mutual labels:  semantic-web, json-ld
React Structured Data
React Structured Data provides an easy way to add structured data to your React apps
Stars: ✭ 120 (-54.2%)
Mutual labels:  schema-org, json-ld
Schema.net
Schema.org objects turned into strongly typed C# POCO classes for use in .NET. All classes can be serialized into JSON/JSON-LD and XML, typically used to represent structured data in the head section of html page.
Stars: ✭ 336 (+28.24%)
Mutual labels:  schema-org, json-ld
ddi-xslt
XSLT transformations for DDI XML-files to other formats
Stars: ✭ 21 (-91.98%)
Mutual labels:  schema-org, json-ld
Hypergraphql
GraphQL interface for querying and serving linked data on the Web.
Stars: ✭ 120 (-54.2%)
Mutual labels:  json-ld, semantic-web
Php Json Ld
PHP implementation of a JSON-LD Processor and API
Stars: ✭ 246 (-6.11%)
Mutual labels:  json-ld, semantic-web
ngx-json-ld
📝 A small component to easily bind JSON-LD schema to Angular templates.
Stars: ✭ 29 (-88.93%)
Mutual labels:  schema-org, json-ld
titanium-json-ld
A JSON-LD 1.1 Processor & API
Stars: ✭ 79 (-69.85%)
Mutual labels:  semantic-web, json-ld

react-schemaorg npm version Build Status Coverage Status

react-schemaorg

Easily insert valid Schema.org JSON-LD in your React apps.

This library provides <JsonLd> for plain React apps, and helmetJsonLdProp() for use with <Helmet>.

Uses schema-dts for Schema.org TypeScript definitions.

Note: This is not an officially supported Google product.

Usage

Install react-schemaorg and your desired version of schema-dts:

npm install schema-dts
npm install react-schemaorg

Plain React Usage

To insert a simple JSON-LD snippet:

import { Person } from "schema-dts";
import { JsonLd } from "react-schemaorg";

export function GraceHopper() {
  return (
    <JsonLd<Person>
      item={{
        "@context": "https://schema.org",
        "@type": "Person",
        name: "Grace Hopper",
        alternateName: "Grace Brewster Murray Hopper",
        alumniOf: {
          "@type": "CollegeOrUniversity",
          name: ["Yale University", "Vassar College"],
        },
        knowsAbout: ["Compilers", "Computer Science"],
      }}
    />
  );
}

Directly creating <script> tags (for next/head and elsewhere)

Certain <head> management libraries require <script> tags to be directly included, rather than wrapped in a component. This includes NextJS's next/head, and react-helmet. With these, we can use the jsonLdScriptProps export to do the same thing:

import { Person } from "schema-dts";
import { jsonLdScriptProps } from "react-schemaorg";
import Head from "next/head";

export default function MyPage() {
  return (
    <Head>
      <script
        {...jsonLdScriptProps<Person>({
          "@context": "https://schema.org",
          "@type": "Person",
          name: "Grace Hopper",
          alternateName: "Grace Brewster Murray Hopper",
          alumniOf: {
            "@type": "CollegeOrUniversity",
            name: ["Yale University", "Vassar College"],
          },
          knowsAbout: ["Compilers", "Computer Science"],
        })}
      />
    </Head>
  );
}

React Helmet Usage

To set JSON-LD in React Helmet, you need to pass it to the script={[...]} prop array in the Helmet component:

import { Person } from "schema-dts";
import { helmetJsonLdProp } from "react-schemaorg";
import { Helmet } from "react-helmet";

<Helmet
  script={[
    helmetJsonLdProp<Person>({
      "@context": "https://schema.org",
      "@type": "Person",
      name: "Grace Hopper",
      alternateName: "Grace Brewster Murray Hopper",
      alumniOf: {
        "@type": "CollegeOrUniversity",
        name: ["Yale University", "Vassar College"],
      },
      knowsAbout: ["Compilers", "Computer Science"],
    }),
  ]}
/>;

Developers

Use NPM to install dependencies:

npm install

Use tsc to build:

tsc

To contribute changes, see the CONTRIBUTING.md file.

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].